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帮助 你 快速 上 手 ! 让 你 从 容 面 对 ! 再 不 学 就 晚 了 ! 
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内 容 提要 
本 书 主要 介绍 Vue.js 的 使 用 方法 和 在 实际 项 目 中 的 运用 , 它 既 可 以 在 一 个 页 面 中 单独 
使 用 , 也 可 以 将 整 站 都 构建 成 单 页 面 应 用 。 为 了 便于 理解 , 本 书 会 从 传统 的 开发 角度 切入 ， 
先 从 数据 泻 染 、 事 件 绑 定 等 方面 介绍 在 Vue.js 中 的 使 用 方法 ,然后 渐进 到 Vue.js 自身 的 特 
性 ， 例 如 数据 绑 定 、 过 滤器 、 指 令 以 及 最 重要 的 组 件 部 分 。 除 了 框架 用 法 外 ， 本 书 还 介绍 
了 和 Vue.js 相关 的 重要 插件 和 构建 工具 , 这 些 工 具有 助 于 帮助 用 户 构建 一 个 完整 的 单 页 面 
应 用 ， 而 不 仅仅 是 停留 在 个 人 DEMO 阶段 的 试验 品 。 而 对 于 复杂 项 目 ，Vue.js 也 提供 了 对 
应 的 状态 管理 工具 Vuex， 降 低 项 目的 开发 和 维护 成 本 。 鉴 于 完稿 前 ，Vue.js 2.0 已 正式 发 
布 完毕 ， 本 书 也 在 相关 用 法 上 对 比 了 1.0 和 2.0 的 区 别 ， 并 补充 了 render 函数 和 服务 端 泻 
染 等 特性 。 
本 书 适 用 于 尚未 接触 过 MVVM 类 前 端 框架 的 开发 者 ,或 者 初步 接触 Vue.js 的 开发 者 ， 
以 及 实际 应 用 Vue.js 开发 项 目的 开发 者 
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PREFACE 


近年 来 ， 前 端 框 架 的 发 展 依旧 火热 ， 新 的 框架 和 名 词 依旧 不 停 地 出 现在 开发 者 眼前 ， 而 
开发 模式 也 产生 了 一 定 的 变化 。 目 前 来 看 ， 前 端 MVVM 框架 的 出 现 给 开发 者 带 来 了 不 小 的 
便利 ， 其 中 的 代表 就 有 Angular.js、React.js 以 及 本 书 中 将 要 介绍 的 Vue.jSs。 这 些 框架 的 产生 
使 得 开发 者 能 从 过 去 手动 维护 DOM 状态 的 繁琐 操作 中 解脱 出 来 ， 尽 可 能 地 让 DOM 的 更 新 操 
作 是 自动 的 ， 状 态 变 化 的 时 候 就 自动 更 新 到 正确 的 状态 。 不 过 ， 新 框架 的 引入 不 可 避免 的 就 是 
学 习 成 本 的 增加 以 及 框架 普及 性 的 问题 ， 相 对 于 Angular.js 和 React.js 而 言 ，Vue.js 的 学 习 
线 则 比较 平稳 。 目 前 在 GitHub 上 已 经 获得 了 超过 30000 的 star， 成 为 了 时 下 无 论 从 令 
FE 还 是 普遍 性 来 说 都 是 可 靠 的 MVVM 框架 选择 之 一 。 
首次 听 说 Vue.js 的 时 候 ， 都 是 介绍 说 体积 小 、 适 合 移 动 端 、 使 用 简单 ， 等 等 。 但 一 开始 
对 于 新 框架 我 一 直 持 观望 态度 ， 毕 竟 前 端 框架 更 新 太 快 ， 而 且 这 又 是 个 个 人 项 目 ， 仅 由 作者 万 
十 溪 一 人 维护 ， 不 像 Angular.js 和 React.js 那样 有 公司 支持 。 后 来 为 了 解决 一 个 移动 端的 项 
， 我 才 正 式 接触 了 Vue.js。 由 于 项 目 本 身 天 然 存 在 组 件 这 个 概念 ， 并 且 需 要 在 手机 上 运行 ， 
调研 后 觉得 应 该 没有 比 Vue.js 更 适合 的 工具 了 。 在 使 用 过 程 中 ， 逐 渐 体 会 到 了 Vue.js 的 便利 ， 
数据 绑 定 及 组 件 系统 对 于 提高 开发 效率 和 代码 复 用 性 来 说 都 有 相当 大 的 帮助 ， 并 且 初 期 对 线 上 
项 目 使 用 这 种 新 框架 的 顾虑 也 渐渐 消除 了 ， 即 使 随 着 后 期 复杂 度 的 增加 也 并 没有 对 项 目的 开发 
和 维护 成 本 造成 影响 。 
本 书 主要 从 我 自身 的 学 习 和 开发 经 验 出 发 ， 介 绍 了 Vue.js 的 基础 用 法 和 特性 ， 包 括 Vue. 
js 的 一 些 插 件 用 法 ， 用 于 解决 客户 端 路 由 和 大 规模 状态 管理 ， 以 及 打包 发 布 等 构建 工具 ， 便 导 
正式 用 于 线 上 环境 。 

最 后 ， 感 谢 Vue.js 作者 尤 南 溪 先 生 为 前 端 开发 者 提供 了 这 款 优 秀 的 框架 ， 使 得 开发 者 能 
够 更 好 地 应 对 项 目 复杂 度 ; 也 感谢 人 民 邮 电 出 版 社 的 大 力 支 持 ， 写 书 的 过 程 的 确 对 人 是 一 种 折 
磨 和 考验 ; 最 后 感谢 每 天 早上 4 点 多 就 开始 叫 我 起 床 的 两 上 只 猫 ， 它 们 对 本 书 的 进度 的 确 起 到 了 
很 好 的 推动 作用 。 
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) 1.1 Vue.js 是 什么 
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太 多 的 新 概念 ， 声 明 
的 绑 定 。 修 改 data 的 数 和 


















































， 是 个 非常 轻 量 级 的 工具 


的 同步 ， 这 个 在 大 多 数 前 端 MV* ( MVC/M 
还 是 现在 AngularJS 者 
使 用 方式 都 不 相同 。 相 比 而 言 ，V 
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人 码 注 册 成 标签 ， 例如: Vue.component('example'"，Example)， 可 以 在 模板 中 以 <example></ 
example> 的 形式 调用 。 如 果 组 件 抽象 得 合理 ， 这 在 很 大 程度 上 能 减少 重复 开发 ， 而 且 配 合 
Vue.js 的 周边 工具 vue-loader， 我 们 可 以 将 一 个 组 件 的 CSS、HTML 和 js 都 写 在 一 个 文件 里 ， 
做 到 模块 化 的 开发 。 

除 此 之 外 ，Vue.js 也 可 以 和 一 些 周边 工具 配合 起 来 ， 例 如 vue-router 和 vue-resource， 
支持 了 路 由 和 异步 请 求 ， 这 样 就 满足 了 开发 单 页面 应 用 的 基本 条 件 。 
) 1.2 ”为 什么 要 用 Vue.js 

相 比 较 Angularjs 和 ReactJS，Vue.js 一直 以 轻 量 级 ， 易 上 手 被 称道 。MVVM 的 开发 模 
式 也 使 前 端 从 原先 的 DOM 操作 中 解放 出 来 ， 我们 不 再 需要 在 维护 视图 和 数据 的 统一 上 人 花 大 量 
的 时 间 ， 只 需要 关注 于 data 的 变化 ， 代 码 变 得 更 加 容易 维护 。 虽 然 社区 和 插件 并 没有 一 些 老 
牌 的 开源 项 目 那 么 丰富 ， 但 满足 日 常 的 开发 是 没有 问题 的 。Vue.js 2.0 也 已 经 发 布 了 beta 版 
本 ， 演 染 层 基 个 轻 量 级 的 virtual-DOM 实现 ， 在 大 多 数 场景 下 初始 化 演 染 速度 和 内 存 消 
耗 都 提升 了 2~4 倍 。 而 阿里 也 开源 了 weex( 可 以 理解 成 ReactJS-Native 和 ReacJS 的 关系 )， 
这 也 意味 着 Vue.js 在 移动 端 有 了 更 多 的 可 能 性 。 

\ 过， 对 于 为 什么 要 选择 使 用 一 个 框架 ， 都 需要 建立 在 一 定 的 项 目 基 础 上 。 如 果 脱 离 实 
际 项 目 情况 我 们 来 谈 某 个 框 染 的 优 务 ， 以 及 是 否 采 用 这 种 框架， 我 觉得 是 不 够 严谨 的 。 

作为 新 兴 的 前 端 框 架 ，Vue.js 也 抛弃 了 对 IE8 的 支持 ， 在 移动 端 支 持 到 Android 4.2+ 和 
iOS 7+。 所 以 如 果 你 在 一 家 比较 传统 ， 还 需要 支持 IE6 的 公司 的 话 ， 你 或 许 就 可 以 考虑 其 他 的 
解决 方案 了 (或 者 说 服 你 的 老板 )。 另 外 ,在 传统 的 前 后 端 混合 〈 通过 后 端 模 板 引 擎 泻 染 ) 的 
项 目 中 ，Vue.js 也 会 受到 一 定 的 限制 ，Vue 实例 只 能 和 后 端 模 板 文件 混合 在 一 起 ， 获 取 的 数 
据 也 需要 依赖 于 后 端的 泻 染 ， 这 在 处 理 一 些 JSON 对 象 和 数组 的 时 候 会 有 些 麻 烦 。 

理想 状态 下 ， 我 们 能 直接 在 前 后 端 分 离 的 新 项 目 中 使 用 Vue.js 最 合适 。 这 能 最 大 程度 上 
发 挥 Vue.js 的 优势 和 特性 ， 熟 悉 后 能 极 大 的 提升 我 们 的 开发 效率 以 及 代码 的 复 用 率 。 尤 其 是 
移动 浏览 器 上 ，Vue.js 压缩 后 只 有 18KB ， 而 且 没 有 其 他 的 依赖 。 
)1.3 Vue.js 的 Hello world 

现在 来 看 一 下 我 们 第 一 个 Vue.js 项 目 ， 按 照 传 统 ， 我 们 来 写 一 个 Hello World。 

首先 ， 引 入 Vue.js 的 方式 有 很 多 ， 你 可 以 采用 直接 使 用 CDN， 例 如 : 






































<script src='http://cdn) 


Sript> 





s.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></ 























也 可 以 通过 NPM 进行 安装 : 




















npm install vue // 最 新 稳定 版 本 
正确 引入 Vue.js 之 后 ,我 们 在 HTML 文件 中 的 内 容 为 : 
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div id="app"> 
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<hl>{ {message}}</h1> 


</div> 


























var vm = new Vuel(t{ 
el : '#app', 
data: “Ff 
message : 'Hello world, I am Vue.js' 
} 
}); 


输出 结果 为 : 














Hello world, I am Vue.js 






















































































这 种 形式 类 似 于 前 端 模板 引擎 ， 我 们 把 js 中 message 值 替换 了 HTML 模板 中 {{message}} 
这 部 分 。 
过 ， 如 果 仅 仅 是 这 样 的 例子 ， 我 相信 你 也 不 会 有 什么 兴趣 去 使 用 Vue.js。 根 据 上 文 对 





















































Vue.js 的 说 明 ， 我 们 继续 写 两 个 有 关于 它 特性 的 例子 。 

第 一 个 特性 是 数据 绑 定 ， 我 们 可 以 在 运行 上 述 例子 的 浏览 器 控制 侣 〈 console ) 环境 
输入 vm.message = 'Hello Vue.js'"， 输 出 结果 就 变 为 了 Hello Vue.js。 也 就 说 明 vm.message 
和 视图 中 的 {{message}} 是 绑 定 的 ， 我 们 无 需 手 动 去 获取 <hl> 标签 来 修改 里 面 的 
innerHTML。 


样 ， 我 们 也 可 以 绑 定 用 户 输入 的 数据 , 视 
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bm 
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会 随 着 用 户 的 输入 而 变化 ， 食 

















el 








<div id="app"> 
<hl>Your input is {{ message }}</h1l> 


» 


<input type=” text” v-model=” message” > 





</div> 





Your input is Hello, World 





























vm.message 的 值 会 随 着 用 户 在 input 中 输入 的 值 的 变化 而 变化 ， 而 无 需 我 们 手动 去 获取 


DOM 元 素 的 值 再 同步 到 js 中 。 
第 二 个 特性 是 组 件 化 ， 简 单 来 说 我 们 可 以 自己 定义 HTML 标签 ,并 在 模板 中 使 用 它 ， 例 如 : 












































































































































<div id="app"> 
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<message content='Hello World'></message> 


</div> 
<script type="text/javascript"> 
Var Message = Vue.extendl(t{ 
Brops, 2 [content "sy 
template : '<hl>{{content}}</h1l>' 
}) 


Vue .component ('message', Message); 


Var vm = new Vuel{ 
el : '#app', 
}): 
</seript> 





二 四 > 


我 们 在 浏览 器 里 最 终 看 到 的 HTML 结果 为 : 















































上 








r<div id="app 
hi>Hello WorLd</h1 
/div 


























的 组 件 化 远 比 示例 复杂 ， 我 们 会 给 组 件 添加 参数 及 方法 ,使 之 能 更 好 地 被 复 用 。 





可 以 看 到 自 定义 的 标签 <message> 被 替换 成 了 <h1>Hello World</hl1>， 当 然 ， 实际 

























































































如 果 说 这 几 个 例子 引起 了 你 对 Vue.js 的 兴趣 的 话 ， 那 接 下 来 我 们 就 会 详细 地 说 明 它 的 丰 
础 用 法 和 应 用 场景 ， 以 及 最 终 我 们 如 何 将 它 真 实地 运用 到 生产 环境 中 。 
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其 实 ， 无 论 前 端 框架 如 何 变化 ， 它 需要 处 理 的 事情 依旧 是 模板 演 染 、 事 件 绑 定 、 处 理 
j 户 交互 (输入 信息 或 鼠标 操作 )， 只 不 过 提供 了 不 同 的 写法 和 理念 。Vue.js 则 会 通过 声 
明 一 个 实例 new Vue({…}) 标记 当前 页 面 的 HTML 结构 、 数 据 的 展示 及 相关 事件 的 绑 定 。 
js 的 构造 函数 的 选项 对 象 及 用 法 ， 以 及 如 何 通过 Vue.js 来 实现 上 述 的 常 





































































































































































































本 章 主要 介绍 Vue 
规 前 端 功能 。 
) 2.1 实例 及 选项 

已; 一 个 Vue 的 实例 |: 


从 以 前 的 例子 可 以 看 出 ，Vuejs 的 使 用 都 是 通过 构造 函数 Vue({option)) 创 寻 
当 于 一 个 MVVM 模式 中 的 ViewModel， 如 图 2-1 所 示 。 










































































var vm = new Vue({})。 一 个 Vue 实例 相 


视图 (View) 视图 模型 模型 (Model) 


(ViewModel) 





展示 和 展示 逻辑 业务 逻辑 和 数据 





图 2-1 
在 实例 化 的 时 候 ， 我 们 可 以 传 入 一 个 选项 对 象 ， 包 含 数据 、 模 板 、 挂 载 元 素 、 方 法 、4 
期 钩子 等 选项 。 下 面 就 对 一 些 常用 的 选项 对 象 属性 进行 具体 的 说 明 。 
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2.1.1 模板 













































































mplate， 属 性 replace 和 template 需要 一 








el : 类 型 为 字符 串 ，DOM 元 素 或 函数 。 其 作 











是 为 实例 






























































进入 编译 过 程 。 
rr hp 中 


template : 类 型 为 字符 串 。 默 认 会 将 templa 





使 用 css 选择 符 ， 或 者 原生 的 DOM 元 素 。 例 如 el: #app'。 在 





提供 挂 载 元 素 。 一 般 来 说 我 们 会 

















初始 项 中 指定 了 el， 实例 将 立即 

















直 蔡 换 挂 
























































并 合并 挂 载 元 素 和 模板 根 节 点 的 属性 《如果 属性 具有 


唯 











载 元 素 ( 即 el 值 对 应 的 元 素 )， 








性 ， 类 似 id， 则 以 模板 根 节点 为 准 )。 
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如 果 replace 为 false， 模 板 template 的 值 将 插入 挂 载 元 素 内 。 








通过 template 插入 模板 的 时 候 ， 














上 


























































































































































































































































































































挂 载 元 素 的 内 容 都 将 被 互联 ， 除 非 使 用 slot 进行 分 发 ( 有 关 slot 内 容 将 在 第 6 章 组 件 中 介绍 )。 
在 使 用 template 时 ， 我 们 往往 不 会 把 所 有 的 HTML 字符 串 直 接 写 在 js 里 面 ， 这 样 影响 可 读 
性 而 且 也 不 利于 维护 。 所 以 经 常用 '#tpl 的 方式 赋值 ， 在 body 内 容 添 加 <scrip id="tpl" 
type="x-template"> 为 标签 包含 的 HTML 内容 ， 这 样 就 能 将 HTML 从 js 中 分 离开 来 ， 示 例 
如 下 : 

<div id="app"> 

<p>123</p> 
</div> 


<script id="tpl" type="x-template"> 
<div class='tpl'> 


<p>This is a tpl from script tag</p> 


</div> 
</script> 
<script type="text/javascript"> 

Var vm = new Vue ( 


el : '#app', 





template : '#tpl' 
}); 
</script> 








最 终 输 出 HTML 结构 为 : 


v<div class="tpl”" id="app 


p>This is a tpL from script tag</p 


/div 























Vue.js 2.0 中 废除 了 replace 这 个 参数 ， 并 





























元 素 ， 即 不 允许 组 件 模板 为 : 





加 要 求 每 





个 Vue.js 实例 需要 有 一 个 根 




















<script id="tpl" type="x-template"> 
<div class='tpl'> 


</div> 
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2.1 实例 及 选项 
<div class='tpl'> 


</div> 
</script> 


这 样 的 兄弟 节点 为 根 节点 的 模板 形式 ， 需 要 改写 成 : 





























<script id="tpl" type="x-template"> 
<div class='wrapper'> 
<div class='tpl'> 


</div> 
<div class='tpl'> 


</div> 
</div> 
</script> 





Vue.js 实例 中 可 以 通过 data 属性 定义 数据 ， 这 些 数据 可 以 在 实例 对 应 的 模板 中 进行 绑 定 
并 使 用 。 需 要 注意 的 是 ， 如 果 传 入 data 的 是 一 个 对 象 ，Vue 实例 会 代理 起 data 对 象 里 的 所 有 
属性 ， 而 不 会 对 传 入 的 对 象 进 行 深 拷 贝 。 另 外 ,我 们 也 可 以 引用 Vue 实例 vm 中 的 $data 来 
获取 声明 的 数据 ， 例 如 : 






















































































































































































Var data = { a: 1 } 
Var vm = new Vuelt{ 
data: data 
} 
vm.$data === data // -> true 
vm.a === data.a // -> true 
// 设置 属性 也 会 影响 到 原始 数据 
vm.a = 2 
datasa // => 2 
// 反之 亦 然 
data.a = 3 
vm.a // -> 3 


然后 在 模板 中 使 用 {{a}} 就 会 输出 vm.a 的 值 ， 并 且 修 改 vm.a 的 值 ， 模 板 中 的 值 会 随 之 
改变 ， 我 们 也 会 称 这 个 数据 为 响应 式 (responsive ) 数据 (具体 的 用 法 和 特性 会 在 第 2.2 节 的 
数据 绑 定 中 说 明 )。 

需要 注意 的 是 ， 只 有 初始 化 时 传 入 的 对 象 才 是 响应 式 的 ， 即 在 声明 完 实例 后 ， 再 加 上 
句 vm.$data.b = '2 ， 并 在 模板 中 使 用 {{b}}， 这 时 是 不 会 输出 字符 串 '2 的 。 例 如 : 













































































































































































































































































<div id="app"> 


异步 社区 会 员 123456(1429595365@qq.com) 专 享 尊重 版 权 


第 2 章 基础 特性 





<p>{{a}}</p> 
<p>{{b}}</p> 


</div> 
Var vm = new Vue (1{ 
el : '#app', 
data : { 
村 业 
} 
下 


vm.$data.b = 2; 















































如 果 需 要 在 实例 化 之 后 加 入 响应 式 变量 ， 需 要 调用 实例 方法 $set, 例如 : 











vm.$set('b', 2); 


不 过 Vue.js 并 不 推荐 这 么 做 ， 这 样 会 抛 出 一 个 异常 : 


























© » [Vue warn]: You are setting a non-existent path "b" on a vm instance, Consider pre- vue.1.0.26. 1s:1023 
initializing the property with the "data" option for more reliable reactivity and better performance. 


> 


所 以 ， 我 们 应 尽量 在 初始 化 的 时 候 ， 把 所 有 的 变量 都 设 定 好 ， 如 果 没 有 
undefined 或 null 占 位 。 
另外 ， 组 件 类 型 的 实例 可 以 通过 props 获取 数据 ， 同 data 一 样 ， 也 需要 在 初始 化 时 预 设 
好 。 示例 : 
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直 ， 也 可 以 































































































<my-component title='myTitle' content='myContent'></my-component> 
Var myComponent = Vue.component('my-component', { 

props £ [title'; "content"]; 

template : '<hl>{{title}}</hl><p>{{content}}</p>' 









































































































































}) 

我 们 也 可 以 在 上 述 组 件 类 型 实例 中 同时 使 用 data， 但 有 两 个 地 方 需要 注意 : GD data 的 值 
必须 是 一 个 函数 ， 返回 值 是 原始 对 象 。 如 果 传 给 组 件 的 data 是 一 个 原始 对 象 的 话 ， 则 在 
建立 多 个 组 件 实例 时 它们 就 会 共用 这 个 data 对 象 ， 修 改 其 中 一 个 组 件 实例 的 数据 就 会 影响 到 









































































































































其 他 组 件 实例 的 数据 ， 这 显然 不 是 我 们 所 期 望 的 。@) data 中 的 属性 和 props 中 的 不 能 重 名 。 
这 两 者 均 会 抛 出 异常 : 


























© » [Vue warn]: The "data" option should be a function that returns a per-instance vatue in vue.1.0.26.1s:1023 
component definitions. 

四 » [Vue warn]: Data field "title" is already defined as a prop. To provide default value for vyue.1.0.26.1s:1023 
a prop, use the "default" prop option; if you want to pass prop values to an instantiation call, use the 
"propsData" option. (found in component: <my-component>)} 


所 以 正确 的 使 用 方法 如 下 : 









































Var MyComponent = Vue.component('my-component', { 





五 二 ES : titler ‘content’]s; 
data : function() { 


return { 
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2.1 实例 及 选项 


}， 

template : '<div> \ 
<h1l>{ {title}}</hl> AN 
<p>{{content}}</p> \ 
<p>{{desc}}</p> \ 


</div>" 





213 方法 


定义 方法 ， 并 且 使 用 v-on 指 令 来 监听 DOM 事件， 
















































































我 们 可 以 通过 选项 属性 methods 对 和 象 半 
例如 : 


<button v-on:click="alert"/>alert<button> 





new Vue ({ 
el : '#app', 
data 人 
methods : { 
alert : function() { 


alert (this.a); 


}); 


























男 外 ，Vue.js 实例 也 支持 自 定义 事件 ， 可 以 在 初始 化 时 传 入 events 对 象 ， 通 过 实例 的 
$emit 方法 进行 触发 。 这 套 通信 机 制 常用 在 组 件 间 相 互通 信 的 情况 中 ， 例 如 子 组 件 冒 泡 触 发 父 
组 件 事件 方法 ,或 者 父 组 件 广播 某 个 事件 ， 子 组 件 对 其 进行 监听 等 。 这 里 先 简 单 说 明 下 用 法 ， 


日 的 情况 将 会 在 第 6 章 组 件 中 进行 说 明 。 
















































































































































































































































































Var vm = new Vue ( 
el : '#app', 
data : data, 
events : { 


'event .alert"' 
alert('this is event alert 


"function(y 4 
0 


}); 
vm. $emit ('event.alert'); 















































E, 不 持 事 件 广播 这 类 特性 ， 推 荐 直接 使 用 





























山 
DF 
































而 Vue.js 2.0 中 废弃 了 events 选项 后 
中 


Vue 实例 的 全 局 方法 $on0/$emit0， 或 者 使 用 插件 
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2.1.4 生命 周期 


Vue.js 实例 在 创 如 


攻 时 有 一 系列 的 初始 化 步 又 ， 例 如 建立 关 











绑 定 等 。 在 此 过 程 中 











， 我 人 

















， 编 译 模板 ， 创 建 数据 



































] 可 以 通过 一 些 定义 好 的 生命 周期 钩子 函 数 来 运 














了 业务 逻辑 。 例 如 : 








data: { 
rc 骨 

}, 

created: 


console.1og( 


} 


Var vm = new Vuelt 


function () 
'created' 





不 保证 $el 已 扣 








created : 











Vue.js 实例 生 
init: 在 实例 开 


foreCreate。 





下 区 的 4 


述 例 子 时 ， 浏 览 器 console 
E 命 周期 ， 可 以 根 
Vue.js 2.0 对 不 少 钓 子 进行 了 修改 ， 











台 初 始 化 时 



































就 会 打印 出 created。 
后 命 周期 钩子 说 明 Vue.js 实例 各 个 阶段 的 情况 




















命 周 期 ( 原 图 出 



































hil 








同步 调用 























和 件 等 都 尚未 初始 化 。2.0 中 更 名 









































beforeCom 


ocument 中 。 


jle: 在 








beforeMount: 2.0 





在 实例 创建 之 后 调用 
外 未 挂 载 到 qd 




















| 四 











人 件 方 法 ， 但 尚 









































TH 
































。2.0 废弃 了 该 方法 ， 
期 钩子 ， 在 mounted 之 前 运行 。 














新 增 的 生命 周 

















compiled: 在 编译 























结束 时 调用 




















入 文档 
: 在 编译 结束 











个 变化 其 实 已 经 改变 ] 
在 vm.$el 插入 DO 

















attached : 














O 2.0 更 名 为 

































































1 $el 第 一 次 插 














TH 








ready 这 个 生命 





必须 使 用 指令 或 实例 方法 (例如 $appe 
弃 了 该 方法 ， 推 
detached: 后 


实例 方法 。2.0 






































始 DOM 编 








触发 DOM 更 新 ， 但 














使 用 mounted。 这 


的 钩子 函数 。 
































] 。 操 作 $el 









































ndTo() ), 百 接 操作 vm.$el 不 会 








Es 





























人 存 任 {他称 3 
































beforeDes 





























EE 义 方法 检查 是 好 











这 个 钩子 。2.0 废 





























[必须 是 指令 或 








ached 人 该 钩子 在 vm.$el 从 














roy : 在 开始 销毁 仿 













































































beforeUpdate: 2.0 前 








destroyed: 在 实例 被 销毁 之 后 油 
新 增 的 4 











E 和 实例 指令 都 已 经 
在 实例 挂 载 之 后 ， 








































































































子 实例 也 被 销毁 。 
实例 〈 例如 更 新 

















































































































周期 钩子 ， 需 要 配合 









































时 会 调用 该 方法 ， 此 时 尚未 
updated:2.0 新 增 的 生命 周 其 
activated : 2.0 新 增 的 生命 

牛 初始 化 泻 染 的 过 程 中 调用 该 方 
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2.1 实例 及 选项 





编译 ci 包 售 的 模板 内 容 





解除 数据 线 定 





一 



































deactivated : 2.0 新 增 的 生命 周期 钩子 ， 需 要 配合 动态 组 件 keep-live 
态 组 件 移出 的 过 程 中 调用 该 方法 。 
可 以 通过 写 一 个 简单 的 demo 来 更 清楚 地 了 解 内 部 的 运行 机 制 ， 代 码 如 下 : 


性 使 用 。 在 动 

















eal 




































































Var vm = new Vue (1{ 
el : '#app', 
init: functionmt() 4 
console.1log('init'); 
}, 
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created: function() { 
console.log('created'); 

7 

beforeCompile: function() { 
console.log('beforeCompile'); 

’ 

compiled: function() { 
console.log('compiled'); 

7 

attached: function () { 
console.log('attached'); 

7 

dettached: function() { 
console.log('dettached'); 

7 

beforeDestroy: function() { 
console.log('beforeDestroy'); 

7 

destroyed: function() { 

console.log('destroyed'); 





ready: function() { 
console.log('ready'); 
// 组 件 完成 后 调用 Sdestory () 函数 ， 进 行销 毁 
this.S$Sdqestroy () 
上 学 








init 

created 
beforeCompile 
compiled 
attached 
ready 
beforeDestroy 


destroyed 


) 2.2 ”数据 绑 定 






























































































































































Vue.js 作为 数据 驱动 视图 的 框架 ， 我 们 首先 要 知道 的 就 是 如 何 将 数据 在 视图 中 展示 出 来 ， 
传统 的 Web 项 目 中 ， 这 一 过 程 往往 是 通过 后 端 模 板 引擎 来 进行 数据 和 视图 的 泻 染 ， 例 如 PHP 
的 smarty，Java 的 velocity 和 freemarker。 但 这 样 导 人 致 的 情况 是 前 后 端 语法 会 交 杂 在 一 










































































起 ,前端 HTML 文件 中 需要 包含 后 端 模 板 引 擎 的 语法 ， 而 且 演 染 完 成 后 如 果 需 要 





于 次 修改 视 
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2.2 数据 绑 定 













































































图 ， 就 只 能 通过 获取 DOM 的 方法 进行 修改 ， 并 手动 维持 数据 和 视图 的 一 致 。 而 Vue.js 的 核 
心 是 一 个 啊 应 式 的 数据 绑 定 系统 ， 建 立 绑 定 后 ，DOM 将 和 数据 保持 同步 ， 这 样 就 无 需 手 动 维 
护 DOM， 使 代码 能 够 更 加 简洁 易 懂 、 提 升 效 率 。 








2.2.1 数据 绑 定 语法 
























































































































































































































































































































































本 小 节 主 要 介绍 Vue.js 的 数据 绑 定 语法 ， 出 现 的 例子 会 基于 以 下 js 代码 : 
Var vm = new Vue ({ 
el : '#app', 
data: { 
和 训 了 
index : 0， 
name : 'Vue', 
avatar : 1http://…… 
六 | 
names : ['Vuel.0', 'Vue2.0'], 
items : [ 
1 Name 2: "Vuel0', version : ‘10" }; 
{ name : 'Vuel.1', version : '1.0' } 
] 
} 
}); 
1. 文本 插值 
数据 绑 定 最 基础 的 形式 就 是 文本 插值 ， 使 用 的 是 双 大 括号 标签 {{}}, 为 “Mustache” 语 
法 〈 源 自前 端 模板 引擎 Mustache.js )， 示 例如 下 : 
<span>Hello {{ name </span> // -> Hello Vue 
Vue.js 实例 vm 中 name 属性 的 值 将 会 蔡 换 Mustache 标签 中 的 name， 并 且 修 改 数据 对 
象 中 的 name 属性 ，DOM 也 会 随 之 更 新 。 在 浏览 器 console 中 运行 vm.name = 'Vue 1.0', 输 
出 结果 为 Hello Vue 1.0。 
模板 语法 同时 也 支持 单 次 插值 ， 即 首次 赋值 后 再 更 改 vm 实例 属性 值 不 会 引起 DOM 变化 ， 
例如 以 下 模板 在 运行 vm.name = 'Vue 1.0' 后 ， 依 旧 会 输出 Hello Vue : 




















<span>Hello {{* name 


} </span> // -> Hello Vue 








Vue.js 2.0 去 除了 {{*}} 这 种 写法 ， 


>{{name}}</s 


97 97 
once= Dame 


2. HTML 属 性 
Mustache 标签 也 同样 适 











7 




















] v-once 代替 。 以 上 模板 





需要 改写 为 <span v- 


pan>。 














用 于 HTML 所 























属性 





， 例 如 : 








王 
是 





<div id="id-{{id}}"></div> 


// <div id="id-1"></div> 

















Vue.js 2.0 





! 废 弃 了 这 种 





div> 代替 ， 或 简写 为 <div :id 


二 








用 v-bind 指令 代替 ，<div v=-bind:id="id-' + id"/></ 


id"></div> 





写法 ， 
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3. 绑 定 表 达 式 
放 在 Mustache 标签 内 的 文本 内 容 称 为 绑 定 表达 式 。 除 了 直接 输出 属性 值 之 外 ， 一 段 绑 
E 表 达 式 可 以 由 一 个 简单 的 JavaScript 表达 式 和 可 选 的 一 个 或 多 个 过 滤器 构成 。 例 如 : 


{{ index + 1 }} //1 


























ul 























三 












































index == 人 
name.split('') .join('|') }} // Viule 





























每 个 绑 定 人 单个 表达 式 ， 并 不 支持 JavaScript 语句 ， 和 否则 Vue.js 就 会 抛 出 
warning 异常 。 并 且 绑 定 表达 式 里 不 支持 正则 表达 式 ， 如 果 需 要 进行 复杂 的 转换 ， 可 以 使 用 过 
滤器 或 者 计算 属性 来 进行 处 理 ， 以 下 的 例子 即 为 无 效 的 表达 式 : 

ff 人 人 二 工行 // 无 效 

{{ if (ok) { return name }} // 无 效 ， 但 可 以 写成 ok ? name : '' 或 者 ok && name 这 




































































天 
















































































Vue.js 绑 定 表达 式 warning : 





© » [Vue varn): Avold using reserved keyvords in expression: var a = 1 


@ » [Vue varn): Avoid using reserved keywords 1n expressios: if|index == 8] return narme 
Or 





[Vue varm): Invalid expression. Generated function body: scope,if(scope,index=—d)scope, retumnane 


过 滤器 
Vue.js 允许 在 表达 式 后 添加 可 选 的 过 滤器 ， 以 





























区 


道 符 指示 。 示 例 : 





nl 





{ name | uppercase }} // VUE 





























Vue.js 将 name 的 从 





传 入 给 uppercase 这 个 内 置 的 过 滤器 中 (本质 是 一 个 函数 )， 返 
字符 串 的 大 写 值 。 同 时 也 允许 多 个 过 滤器 链 式 使 用 ， 例 如 : 















































I 


























{ name | filterA | filterB }} 





也 允许 传 入 多 个 参数 ， 例 如 : 








{ name | filterA argl arg2}} 














此 时 ，filterA 将 name 的 值 做 为 第 一 个 参数 ，argl，arg2 做 为 多 第 三 个 参数 传 入 过 
滤器 函数 中 。 最 终 函 数 的 返回 值 即 为 输出 结果 。arg1，arg2 可 以 使 用 表达 式 ， 也 可 以 加 j] 
引号 ， 直 接 传 入 字符 串 。 例 如 : 






























































I 





























单 












































{ mame split("") limitBy 3 1 }} // ->u,e 















































过 滤器 limitBy 可 以 接受 两 个 参数 ， 第 一 个 参数 是 设置 显示 个 数 ， 第 二 个 参数 为 可 选 ， 
指 从 开始 元 素 的 数组 下 标 。 
Vue.js 内 置 了 10 个 过 滤器 ， 下 面 简单 介绍 它们 的 功能 和 
QD capitalize : 字符 串 首 字 符 转 化 成 大 写 
@) uppercase : 字符 串 转 化 成 大 写 
@) lowercase : 字符 串 转 化 成 小 写 
























































过 
证 
o 
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少 @® 




















2.2 数据 绑 定 


currency 参数 为 {String}[ 货 币 符号 ] , {Number} [小 数位 ]， 将 数字 转化 成 货币 符号 ， 
9 动 添 加 数字 分 节 号 。 例 如 : 











{{ amount | curre 


ncy 


¥， 2 }} // -> 若 amount 值 为 10000， 则 输出 Y10,000.00 








@) pluralize 参数 为 {String} single,， [double, triplel， 字 符 串 复数 化 。 如 果 接 收 的 是 一 




















A 器 








个 参数 ， 那 复数 形式 就 是 在 字 | 
处理， 字符 串 会 添加 对 应 数组 下 标的 值 。 如 果 字 符 串 的 个 数 多 于 参数 个 数 ， 多 出 部 分 会 都 添加 









































符 上 














末尾 直接 加 “s”。 如 果 接 收 多 个 参数 ， 则 会 被 当成 数组 








Ld 






































最 后 一 个 参数 的 值 。 例 如 : 
<p v-for="c in count">{{ c | pluralize "Item' } {{ € | Bluralizs "Sst" 


nd 'rd' 'th' }}</p> 








输出 结果 : 


人 json 参数 为 {Nu 
对 象 数 据 输出 成 符合 json 





litem 1st 
2items 2nd 
3items 3rd 


4items 4th 

















mber}[indent] 空格 缩 进 数 ， 与 JSON.stringify0 作用 相同 ,将 json 
格式 的 字符 有 





Ld 





O 

















(OO) debounce 传 入 值 





























间 。 网 如 2 








必须 是 函数 ， 人 参数 可 选 ,为 {Number}[wait]， 即 延 时 时 长 。 作 用 是 
当 调用 函数 n 毫秒 后 ， 才 会 执行 该 动作 ， 若 在 这 mn 毫秒 内 又 调用 此 动作 则 将 重新 计算 执行 时 















































<input v-on:keyup ="onKeyup | debounce 500"> // :input 元 素 上 监听 了 keyup 事件 ， 


并 且 延 训 500ms 触发 








limitBy 传 入 人 











必须 是 数组 ， 人 参数 为 {Number}limit，{Number}[offset], limit 为 显 

















示 个 数 ，offset 为 开始 显示 数组 下 标 。 例 如 : 





组 中 的 前 十 个 元 素 


<div v-for="item in items | limitBy 10"></div> // items 为 数组 ， 且 只 显示 数 























@ filterBy 传 入 值 必须 是 数组 ， 人 参数 为 {String | Function} targetStringOrFunction ， 

















即 需要 匹配 的 字符 串 或 函 








分 隔 符 ); {String}[…searchKeys]， 为 检索 的 属性 区 域 。 示 例 : 



































数 ( 通 


过 函数 返回 值 为 true 或 false 来 判断 匹配 结果 );“in”( 可 选 























<p v-for="name in names | filterBy '1.0'">{{name}}</p> // 检索 items 数组 中 


值 包含 1.0 的 元 素 


<p v-for="item in items | filterBy '1.0' in 'name'">{{ item | json}}</p> 
// 检索 items 数组 中 元 素 属性 name 值 为 1.0 的 元 素 输出 。 检 索 区 域 也 可 以 为 数组 ， 即 in [name， 
version]， 在 多 个 属性 中 进行 检索 
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上 述 两 个 例子 的 输出 结果 为 : 





Vuel.0 


{ "name": "Vuel.0", "version": "1.0" } 





<p v-for="item in items | filterBy customFilter">{{ item | json}}</p> // 
使 用 自 定义 的 过 滤 函 数 ， 函 数 可 以 在 选项 methods 中 定义 
methods : { 
customFilter : function(item) { 


if(item.name) return true // 检索 所 有 元 素 中 包含 name 属性 的 元 素 


} 








人 orderBy 传 入 值 必 须 是 数组 ， 参 数 为 {String|Array |Function}sortKeys， 即 指定 排序 
策略 。 这 里 可 以 使 用 单个 键 和 名， 也 可 以 传 入 包含 多 个 排序 键 名 的 数组 。 也 可 以 像 Array.Sort0 
那样 传 入 自己 的 排序 策略 函数 。 第 二 个 参数 为 可 选 参 数 {String}[order]， 即 选择 升序 或 降序 ， 
order>=0 为 升序 ，order<0 为 降序 。 下 面 以 三 种 不 同 的 参数 例子 来 说 明 具体 的 用 法 : 





















































- 
















































































单个 键 名 : <p v-for="item in items | orderBy 'name' -1">{{item.name}}</p> 
// items 数组 中 以 键 名 name 进行 降序 排列 

多 个 键 名 : <p v-for="item in items | orderBy [name,version] ">{{item.name}}</p> // 
使 用 items 里 的 两 个 键 名 进行 排序 

自 定 义 排 序 函 数 : <p v-for="item in items | orderBy customOrder">{{item.name}} 
</P> 

methods: { 

customOrder: function (a, b) { 
return parseFloat (a.version) > parseFloat(b.version) // 对 比 item 中 


version 的 值 的 大 小 进行 排序 
































需要 注意 的 是 ，Vue.js 2.0 中 已 经 去 除了 内 置 的 过 滤器 ， 但 也 不 用 担心 ， 我 们 会 在 第 4 
章 中 详细 说 明 过 滤器 的 用 法 ， 以 及 如 何 声 明 自 定义 过 滤器 。 而 且 Vue.js 的 社区 中 本 身 就 有 优 
秀 的 开源 过 滤器 ， 比 如 人 处理 时 间 的 moment.js， 和 货币 格式 化 处 理 的 account.js， 我 们 会 在 第 
章 a ] Vue.js 的 插件 。 



















































































































































































































































































Vue.js 也 提供 指令 ( Directives ) 这 一 概念 ， 可 以 理解 为 当 表 达 式 的 值 发 生 改 变 时 ， 
会 有 些 特殊 行为 作用 到 绑 定 的 DOM 上 。 指 令 通常 会 直接 书写 在 模板 的 HTML 元 素 中 ， 
而 为 了 有 别 于 普通 的 属性 ，Vue.js 指令 是 带 有 前 级 的 v- 的 属性 。 写 法 上 来 说 ， 指 令 的 
值 限 定 为 绑 定 对 所 以 上 述 提 到 的 JavaScript 表达 式 及 过 滤器 规则 在 这 里 也 适用 。 
本 书 会 在 第 3 章 中 详细 讲述 指令 及 自 定义 指令 的 作用 。 本 闻 先 简单 介绍 指令 绑 定 数据 和 
有 件 的 语法 。 
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2.2 数据 绑 定 


中 参数 





<img v-bind:src="avatar" /> 























指令 v-bind 可 以 在 后 面 带 一 个 参数 ， 用 冒号 ( : ) 隔 开 ，src 即 为 参数 。 此 时 img 标签 
1 的 src 会 与 vm 实例 中 的 avatar 绑 定 ， 等 同 于 : 







































































<img src="{{avatar}}" /> 


@ 修饰 符 
修饰 符 ( Modifiers ) 是 以 





[RE 





























句号 . 开始 的 特殊 后 绥 ， 


<button v-on:click.stop="doClick"></button> 

















示 指 令 应 该 以 特殊 方式 绑 定 。 


AH 


[as 



































v=-on 的 作用 是 在 对 应 的 DOM 元 素 上 绑 定 事件 监听 器 ，doClick 为 也 数 名 ， 而 stop 即 为 
修饰 符 ， 作 用 是 停止 冒 泡 ， 相 当 于 调用 了 e. stopPropagation()。 




































































2.2.2 计算 属性 


在 项 目 开 发 中 ,我 们 展示 的 数据 往往 需要 经 过 一 些 处 理 。 除 了 在 模板 中 绑 定 表达 式 或 者 
利用 过 滤器 外 ，Vue.js 还 提供 了 计算 属性 这 种 方法 ， 避 免 在 模板 中 加 入 过 重 的 业务 逻辑 ， 保 证 
模板 的 结构 清晰 和 可 维护 性 。 




























































































































































































1。 基础 例子 
Var vm = new Vuelt 
el : '#app, 
datas 1 
frstName : 'Gavin', 


lastName: 'CLY' 
} 
computed : { 
fullName : function() { 
// this 指向 vm 实例 


return this.firstName + ' ' + this.lastName 


<p>{{ firstName }}</p> // Gavin 
<p>{{ lastName }}</p> // CLY 
<p>{{ fullName }}</p> // Gavin CLY 





此 时 ， 你 对 vm.firstName 和 vm.lastName 进行 修改 ， 始 终 会 影响 vm.fullName。 
2. Setter 

如 果 说 上 面 那 个 例子 并 没有 体现 出 来 计算 属性 的 优势 的 话 ， 那 计算 属性 的 Setter 方法 ， 
则 在 更 新 属性 时 给 我 们 带 来 了 便利 。 示 例 : 
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第 2 章 基础 特性 








Var vm = new Vuelt{ 
el : '#el', 
data: { 


eents * 00., 
} 
computed : { 
price : { 
set : function (newValue) { 
this.cents = newValue * 100; 
}, 
get : function() { 
return (this.cents / 100).toFixed (2); 


















































在 处 理 商品 价格 的 时 候 ， 后 端 往往 会 把 价钱 定义 成 以 分 为 单位 的 整 型 ， 避 免 在 处 理 浮 

























































































改 的 话 ， 则 又 要 把 输入 的 价格 再 恢复 到 分 传 给 后 端 ， 很 是 繁琐 。 
而 在 使 用 Vue.js 的 计算 属性 后 ， 我 们 可 以 将 vm.cents 设置 为 后 端 所 存 的 数据 ， 计 算 
性 price 为 前 端 展示 和 更 新 的 数据 。 



















































































类 型 数据 时 产生 的 问题 。 而 前 端 则 需要 把 价钱 再 转 成 元 进行 展示 ， 而 且 如 果 需 要 对 价钱 进行 
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深 








al 








<p>&yen; {{price}}</p> // ¥1.00 

















出 


















































饥 数 据 。 








Errors Warnings Info Logs Debug Handled 


vm.price = 2 
2 
vm.cents 
200 

> | 


2.2.3 ”表单 控件 


此 时 更 改 vm.price = 2，vm.cents 会 被 更 新 为 200， 在 传递 给 后 端 时 无 需 再 手动 转化 一 

















芝 单 元 素 进 行 双 辐 数 据 绑 定 ， 在 修改 表单 元 素 值 











Vue.js 中 提供 v-model 的 指令 对 









































同时 ， 实 例 vm 中 对 应 的 属性 值 也 同时 更 新 ， 反 之 亦 然 。 本 小 节 会 介绍 主要 input 元 素 绑 



























































v-model 后 的 具体 用 法 和 处 理 方式 ， 示 例 所 依赖 的 js 代码 如 下 : 




















Var vm = new Vue ( 
el : '#app', 
data: 

message : '', 
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2.2 数据 绑 定 





















































gender : 1， 
checked : *'! 
multiChecked Lx 
selected 
multiSelected [] 
} 
Fy 
1. Text 
输入 框 示例 ， 用 户 输入 的 内 容 和 vm.message 直接 绑 定 : 
<input type="text" v-model="message" /> 


<span>Your input is {{ message }}</span> 





Your input is : hello 


2. Radio 
单 选 框 示例 : 














<label><input type="radio" value="male" v-model="gender "> 男 </lable> 


<label><input type="radio" value="female" v-model="gender "> 女 </lable> 









































<p>{{ gender }}</p> 
gender 值 即 为 选中 的 radio 元 素 的 value 值 。 
辣 男 中 女 male 
3. Checkbox 

















[HHI 


种 情况 ， 单个 勾 选 框 和 多 个 勾 选 太 
， 些 时 input 








Checkbox 分 | 
单个 勾 选 框 ，v-model 即 为 布尔 值 





O 


的 value 并 不 影响 v-model 的 值 。 




















由 




















全。 


<input type="checkbox" v-model="checked" 
{{ checked 





<span>checked }</span> 





checked : true 



























































多 个 勾 选 框 ，v-model 使 用 相同 的 属性 名 称 ， 且 属性 为 数组 。 
<label><input type="checkbox" value="1" v-model=" multiChecked">1</lable> 


<label><input type="checkbox" value="2" v-model=" multiChecked">2</lable> 





v-model=" multiChecked">3</lable> 
}}</p> 


<label><input type="checkbox" value="3" 


<p>MultiChecked: {{ multiChecked.join('|') 





610203 
MultiChecked: 112 
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第 2 章 基础 特性 





4. Select 
同 Checkbox 元 素 一 样 ，Select 也 分 单 选 和 多 选 两 种 ， 多 选 的 时 候 也 需要 绑 定 到 一 个 数组 。 
单 选 : 



































<select v-model="selected"> 
<option selected>A</option> 
<option>B</option> 
<option>C</option> 

</select> 

<span>Selected: {{ selected }}</span> 





多 选 : 





<select v-model="multiSelected" multiple> 
<option selected>A</option> 
<option>B</option> 
<option>C</option> 
</select> 
<br> 
<span>MultiSelected: {{ multiSelected.join('|') }}</span> 





A 加 Selected: A 


A 
B 
Cc 


MultiSelected: AIC 
5. 绑 定 value 


表单 控件 的 从 
1. Checkbox 



































同样 可 以 绑 定 在 Vue 实例 的 动态 属性 上 ,用 v-bind 实现 。 示 例 : 















































<input type="checkbox" v—-model="checked" v—bind:true—value="a" v—bind:false—value="b"> 
选中 : vm.checked == vm.a // -> true 

未 选中 : vm.checked == vm.b // -> true 

2. Radio 


<input type="radio" v-model="checked", v—-bind:value="a"> 














选中 : vm.checked == vm.a // -> true 





3. Select Options 
<select v-model="selected"> 
i 对 象 字 面 量 > 


<option v-bind:value="{ number: 123 }">123</option> 


























</select> 











选中 : 
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2.2 数据 绑 定 


typeof vm.selected // -> 'object 
vm.selected.number // -> 123 
6.， 参数 特性 
Vue.js 为 表单 控件 提供 了 一 些 参数 ， 方 便 人 处 理 某 些 常 规 操 作 。 
QD lazy 
默认 情况 下 ，v-model 在 input 
change 事件 中 同步 。 
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jy 





医 值 与 数据 ， 加 lazy 属性 后 从 会 改 到 在 


酒 


















































<input v-model="query" lazy /> 





©® number 
会 自动 将 用 户 输入 转 为 Number 类 型 ， 如 果 原 值 转换 结果 为 NaN 则 返 
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Ee 


原 值 o 


















































<input v-model="age" number/> 





@) debounce 
debounce 为 设置 的 最 小 延 时 ， 单 位 为 ms， 即 为 单位 时 间 内 仅 执 行 一 次 数据 更 新 。 该 参 
数 往往 应 用 在 高 耗 操 作 上 ， 例 如 在 更 新 时 发 出 ajax 请 求 返 回 提示 信息 。 




















































































































<input v-model="query" debounce="500" /> 


不 过 Vue.js 2.0 中 取消 了 lazy 和 number 作为 参数 ， 用 修饰 符 ( modifier ) 来 代替 : 


















































<input v-model.lazy="query" /> <input v-model.numer="age" /> 


新 增 了 trim 修饰 符 ， 去 掉 输 入 值 首尾 空格 : 

















I 





























<input v-model.trim="name" /> 
去 除了 debounce 这 个 参数 ， 原 因 是 无 法 监测 到 输入 新 数据 ， 但 尚未 同步 到 vm 实例 属 


隆 时 这 个 状态 。 如 果 仍 有 需要 ， 官 方 提供 了 手动 实现 的 例子 https://isbin.com/zefawu/3/ 
edit?html,output。 























上 ol 












































2.2.4 Class 与 Style 绑 定 


在 开发 过 程 中 ， 我 们 经 常会 遇 到 动态 添加 类 名 或 直接 修改 内 联 样 式 (例如 tab 切换 )。 
class 和 style 都 是 DOM 元 素 的 attribute， 我 们 当然 可 以 直接 使 用 v-bind 对 这 两 个 属性 进行 
数据 绑 定 ， 例 如 <p v-bind:style='style'><p>， 然 后 通过 修改 vm.style 的 值 对 元 素 样 式 进行 
修改 。 但 这 样 未 免 过 于 繁琐 而 且 容 易 出 错 ， 所 以 Vue.js 为 这 两 个 属性 单独 做 了 增强 处 理 ， 表 
达 式 的 结果 类 型 除了 字符 串 之 外 ， 还 可 以 是 对 象 和 数组 。 本 小 节 就 会 对 这 两 个 属性 具体 的 用 法 
进行 说 明 。 
1. Class 绑 定 
首先 说 明 的 是 class 属性 ， 我 们 绑 定 的 数据 可 以 是 对 象 和 数组 ， 具 体 的 语法 如 下 : 

Q@ 对 象 语法 : v-bind:class 接受 参数 是 一 个 对 象 ， 而 且 可 以 与 普通 的 class 属性 共存 。 





































































































































































































































































































































































































异步 社区 会 员 123456(1429595365@qq.com) 专 享 尊重 版 权 


A 


和 





2 章 ， 基础 特性 





<div class="tab" v-bind:calss="{'active' active , 'unactive' 
</div> 
vm 实例 中 需要 包含 
data : { 
active : 七 FUe 





只 为 : <div class="tab active"></div> 








数组 语法 : v-bind:class 也 接受 数组 作为 参数 。 





<div v 


-bind:class="[classA, classB]"></div> 


vm 实例 中 需要 包含 


data : 


(= 
sl 
} 


{ 
assA : 'class-a', 


asSsB. “ "class=b" 








2 


演 染 


f 果 为 : <div class="class-a class-b"></div>。 












































一 口 
也 可 以 使 用 三 元 表达 式 切 换 数 组 中 的 class，<div v-bind:class="[classA, isB ?classB : 
中 "></div>。 如 果 vm.isB = false, 则 泻 染 结果 为 <div v-bind:class="class-a"></div>。 


2. 内 联 样式 绑 定 































































































































































































































































































style 属性 绑 定 的 数据 即 为 内 联 样式 ， 同 样 具有 对 象 和 数组 两 种 形式 
@ 对 象 语法 : 直接 绑 定 符合 样式 格式 的 对 象 。 
<div v-bind:style="alertStyle"></div> 
data : { 
alertSstyle { 
color : 'red', 
fontSize : '20px' 
} 
} 
余 了 直接 绑 定 对 象 外 ， 也 可 以 绑 定 单个 属性 或 直接 使 用 字符 串 。 
<div v-bind:style="{ fontSize : alertStyle.fontSize, color : 'red'}"></div> 
@ 数组 语法 : v-pind:style 允许 将 多 个 样式 对 象 绑 定 到 统一 元 素 上 。 
<div v-bind:style="[ styleObjectA, styleObjectB]" .></div> 
3. 自动 添加 前 绥 
在 使 用 transform 这 类 属性 时 ，v-bind:style 会 根据 需要 自动 添加 厂商 前 级 。:style 在 
运行 时 进行 前 绥 探 测 ， 如 果 浏 览 器 版 本 本 身 就 支持 不 加 前 绥 的 css 属性 ， 那 就 不 会 添加 。 





) 2.3 ”模板 泻 染 


国雄 





Xx. 
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获取 到 后 端 数 

















它 按照 一 定 的 规则 加 载 到 写 好 的 模板 








[ 量 


时 后 ， 我 们 会 
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lactive}"> 


， 输 出 成 在 浏览 












































演 染 。 本 节 主 要 介绍 Vue.js 演 染 的 基本 语法 。 





2.3.1 前 后 端 泻 染 对 比 


2.3 


器 中 显示 的 HTML， 这 个 过 程 就 称 之 为 泻 染 。 而 Vue.js 是 在 前 端 ( 即 浏览 器 内 ) 进行 的 模板 


模板 泻 染 




































































端 模板 引擎 ， 甚 至 于 直接 在 HTML 模板 中 艇 入 后 端 语言 ( 例如 JSP )， 将 数据 加 载 进 来 生成 























早期 的 Web 项 目 一 般 是 在 服务 器 端 进行 党 染 ， 服 务 器 进程 从 数据 库 获 取 数 据 后 ， 















































































































































则 是 在 浏览 器 里 利用 JS 把 数据 和 HTML 模板 进行 组 合 。 两 种 方式 各 有 
自己 的 业务 场景 来 选择 技术 方案 。 













































































HTML， 然 后 通过 网 络 传输 到 用 户 的 浏览 器 中 ， 然 后 被 浏 览 器 解析 成 可 见 的 页 面 。 而 前 端 泻 染 





























己 的 优 缺 点 ， 

















a EE 
Ls 








J 业务 分 离 ， 后 端 只 需要 提供 数据 接口 ， 前 端 在 开发 时 也 不 需要 部 署 对 应 的 后 端 环境 ， 








































































































通过 一 些 代 理 服务 器 工具 就 能 远程 获取 后 端 数 据 进 行 开发 ， 能 够 提升 开发 效率 。 


@) 计算 量 转移 ， 原 本 需要 后 端 演 染 的 任务 转移 给 了 前 端 ， 减 轻 了 服务 器 的 压力 。 








而 后 端 泻 染 的 优点 在 于 : 


J 对 搜索 引擎 友好 。 















































@) 首页 加 载 时 间 短 ， 后 端 演 染 加 载 完成 后 就 直接 显示 HTML， 但 前 端 泻 染 在 加 载 完成 
































后 还 需要 有 段 js 泻 染 的 时 间 。 


















































Vue.js 2.0 开始 支持 服务 端 泻 染 ， 从 而 让 开发 者 在 使 用 上 有 了 更 多 的 选择 。 
































2.3.2 ”条 件 泻 染 





Vue.js 提供 v-if，v-show，v-else,， Vv-for 这 几 个 指令 来 说 明 模板 和 数据 间 的 




































































系 ， 这 基本 就 构成 了 模板 引擎 的 主要 部 分 。 下 面 将 详细 说 明 这 几 个 指令 的 
1. Vv-if/v-else 








法 和 场景 。 



































v-if 和 v-else 的 作用 是 根据 数据 全 

















来 判断 是 否 输出 该 DOM 元 素 ， 以 及 

















LD 


逻辑 关 





包含 的 子 元 索 O 例如 2。 





<div v-if="yes">yes</div> 

















ls 











如 果 当 前 vm 实例 中 包含 data.yes = true， 则 模板 引擎 将 会 编译 这 个 DOM 节点 ， 输 出 























<div>yes</div>。 


我 们 也 可 以 利用 v-else 来 配合 v-if 使 用 。 例 如 : 












































<div v-if="yes">yes</div> 
<div v-else>no</div> 














需要 注意 的 是 ，v-else 必须 紧 跟 v-if， 不 然 该 指令 不 起 作用 。 例 如 : 























<div v-if="yes">yes</div> 
<p>the v-else div shows</p> 
<div v-else>no</div> 
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最 终 这 三 个 元 素 都 会 输出 显示 在 浏览 器 中 。 
v- 计 绑 定 的 元 素 包含 子 元 素 则 不 影响 和 v-else 的 使 用 。 例 如 : 


























<div v-if="yes"> 
<div v-if="inner">inner</div> 
<div v-else>not inner</div> 
</div> 
<div v-else>no</div> 
new Vue ({ 
data : { 
yes : true, 


inner : false 


}) 


输出 结果 为 : 














<div> 
<div>not inner></div> 
</div> 





2. v-show 
除了 v-if，v-show 也 是 可 以 根据 条 件 








展示 元 素 的 一 种 指令 。 例 如 : 








上 





<div v-show="show">show</div> 





























也 可 以 搭配 v-else 使 用 ， 用 法 和 v-if 一 致 。 例 如 : 














<div v-show="show">show</div> 


<div v-else>hidden</div> 






































与 v- 计 不 同 的 是 ，v-show 元 素 的 使 用 会 泻 染 并 保持 在 DOM 中 。v-show 只 是 切换 元 素 
的 css 属性 display。 例 如 : 





























<div v-if="show">if</div> 


<div v-show="show">show</div> 








show 分 别 为 true 时 的 结果 : 





<!— V-if vs v-show ”一 > 
div>if</div 
div>show</div 





show 分 别 为 false 时 的 结果 : 





<!— V-if vs Vv-show -——> 
div style="display: none;">show</div 


3. v-if vs v-show 
从 上 述 v-show 图 能 够 明显 看 到 ， 当 v-if 和 v-show 的 条 件 发 生变 化 时 ，v-=-if 引起 了 
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性 能 要 比 Ve 





除 此 之 








2.3 ”模板 泻 染 




























































































dom 操作 级 别 的 变化 ， 而 v-show 仅 发 生 了 样式 的 变化 ， 从 切换 的 角度 考虑 ，v-show 消耗 的 
站 小 。 

外 ，v- 计 切换 时 ，Vue.js 会 有 一 个 局 部 编译 / 纯 载 的 过 程 ， 因 为 v-if 中 的 模板 

组 件 。v-if 会 确保 条 件 块 在 切换 当中 适当 地 销毁 与 中 间 内 部 的 事件 














也 可 能 包括 数据 绑 定 或 子 
监听 器 和 子 组 件 。 而 上 


















































































































































Vv- 站 是 惰性 的 ， 如 果 在 初始 条 伯 


























F 为 假 时 ，v-i 








































































































有 更 高 的 初始 泻 染 消耗 我们 需要 








f 本 身 什么 都 不 会 做 ,而 





v-for 绑 定 到 的 DOM 元 素 及 


v-show 则 仍 会 进行 正常 的 操作 ， 然 后 把 css 样式 设置 为 display:none。 
所 以 ， 总 的 来 说 ，v-if 有 更 高 的 切换 消耗 而 v-show 

根据 实际 的 使 用 场景 来 选择 合适 的 指令 。 

2.3.3 列表 注 染 
v-for 指令 主要 用 于 列表 泻 染 ， 将 根据 接收 到 数组 重复 泻 染 

内 部 的 子 元 素 ， 并 且 可 以 通过 设置 别名 的 方式 ， 获 取 数 组 内 数据 泻 染 到 节点 
























































例如 : 





<ul> 


<li v-for="item in items"> 
<h3>{{item.title}}</h3> 
<p>{{item.description}}</p> 


< 汪汪 六 
/UL 
Var vm = new Vuel({ 
el : '#app', 
data: { 
items : [ 
{ title ';: "title=1', description ': 
{ title : title=2'"',; deseription : 
{ title : "title=3', description. : 
{ title : 'title-4', description : 


'description-1'}, 
'description-2'}, 
'description-3'}, 
'description-4'} 


























其 中 items 为 data 




















个 元 素 ， 输 出 结果 为 : 











的 属性 名 ，item 为 别名 ， 可 以 通过 item 来 获取 当前 数组 遍历 的 每 












































< 
<1i> 
< 


妆 V 江 壮 
< 


< 
< 


h3>title-1</ 


> 
h3>title-2</ 


> 
h3>title-3</ 








h3> 


<p>description-1</p> 


h3> 


<p>description-2</p> 





h3> 
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寺 性 


<p>description-3< 
和 守 过 3 这 
<h3>title-4</h3> 
<p>description-4< 
</1i> 
</ul> 





/p> 


/p> 





外 ， 


{{$index}} - {{i 





Vv 一 for 内 
我 们 也 可 


























六 











tem.title}}</li 


了 $index 变量 ， 


自己 指定 索引 的 别名 ， 


可 以 在 v-for 指令 内 调 














>， 输 出 结果 为 : 





如 <li vfor="(in 














]， 输 出 当前 数组 元 素 的 索引 。 男 


dex,item) in items">{{index}} -= 








<ul> 
产业 于 六 
0 = 0 = 
le hls 
二 二 二 世 主 攻击 
业 王 区 二 芋 冯 
2 
i 
3 
1i> 


&=1 
</ 
e-2 
</ 
SG=3 
</ 





e-4 











ue.js 对 da 












































also— 




















通过 索引 直接 修改 数组 












































vm.items.$set(0, { title : 


种 方 




















changed ,这 











种 情况 是 无 法 
元 素 , 例如 vm.i 
@ 无 法 直接 修改 “修改 数组 ”的 长 
种 情况 ，Vue.js 提供 了 $set 方法 ， 在 1 


式 钥 可 以 达到 效果 。 

















! 数 组 的 原生 方法 六 



































触发 视图 更 新 的 : 











ems[0] = 


度 , 例如 

















'title-changed'} 或 者 






































在 列表 泻 染 的 时 候 ， 有 个 性 








多 改 数 和 


{ title : 
: vm.items.length = 0 


居 的 同时 进 





vm 


.$Se 


行 了 封装 ， 所 以 在 改变 数组 时 能 触发 





'title-changed'}: 








中 





了 视图 更 新 ， 可 以 











(items[0]', { title : ‘title— 














能 方 

















硬 的 小 技巧 ， 如 果 数 组 























瑟 








标识 id， 例 如: 








站 
{ 了 i: 
{dh 
{ dd 


Li 在于 蕊 于 全 这 
27 title 3 
3 攻 二 起 由 人 汉 


] 


中 itle=1L" 3} 
【起 主 七 由 总 = 有 2 下 7 
二 生起 汪 和 三 志 省 


























通过 trace-by 给 数组 设 定 唯 





标识 ,我 们 将 上 述 v 











for 作 

















于 的 li 元素 修改 为 : 











< 


li v-for="item in items" trac 


k=by="™. Ed"></ 


11> 




















全 














这 样 ，Vue.js 在 泻 染 过 程 





尽量 复 用 原 有 对 和 象 的 作 


























v-for 除了 可 以 遍历 数组 


遍 


SA 

















j 域 及 











DOM 元 素 。 




















， 也 可 以 违 

















历 对 象 ， 与 $index 类 似 ， 作 








域内 可 以 访问 另 一 
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2.3 ”模板 演 染 




















内 置 变量 $key， 也 可 以 使 用 (key, value ) 形式 自 定义 key 变量 。 
<11 v-for=" (key, Value) in objectDemo"> 
{{key}} - {{$key}} {{value} 
</1i> 
Var vm = new Vuelt{ 
el : '#app', 
datas 1{ 
objectDemo : { 
a : 'a-value', 
b : 'b-value', 
C : 'c-value', 
} 
} 
js 
输出 结果 : 
。 a-a:a-value 
。 b-b:b-value 
®。 CcC-c:c-value 


最 后 ，v-for 还 可 以 接受 单个 整数 ， 














j 作 循环 次 数 : 














< 二 计生 二 下 全 站 
{{ a 
交 / 让 重光 








输出 结果 : 





2.3.4 template 标签 用 法 


® 0 0 0 。 
全 WO 一 OO 






































上 述 的 例子 中 ，v-show 和 v-f 指 令 都 包含 在 一 个 根 元 素 
j 到 多 个 兄弟 DOM 元 素 上 ? Vue.js 提供 了 template 标签 我们 可 以 将 指令 作用 













































































， 那 是 否 有 方式 可 以 将 指令 
































作 到 这 个 标 
符 上 ,但 最 后 的 泻 染 结 果 里 不 会 有 它 。 例 如 : 
<template v-if="yes"> 
<p>There is first dom</p> 
<p>There is second dom</p> 
<p>There is third dom</p> 
异步 社区 会 员 123456(1429595365@qq.com) 专 享 尊重 版 权 


27 


28 


第 2 章 基础 特性 




















</template> 
<!— template 一 -> 
p>There is first dom</p 
p>There is second dom</p 
p>There is third dom</p 
同样 , template 标签 也 支持 使 用 v-for 指令 ， 用 来 泻 染 同 级 的 多 个 兄弟 元 素 。 例 如 : 









































<template v-for="item in items"> 
<p>{{item.name}}</p> 
<p>{{item.desc}}<p> 
</template> 





) 2.4 ”事件 绑 定 与 监听 


当 模 板 泻 染 完成 之 后 ， 就 可 以 进行 事件 的 绑 定 与 监听 了 。Vue.js 提供 了 v-on 指令 用 3 
监听 DOM 事件 ， 通 常 在 模板 内 直接 使 用 ， 而 不 像 传 统 方式 在 js 中 获取 DOM 元 素 ， 然 后 绑 定 
大 件 。 例 如 : 











































































































(Th 





hl 
py 
个 











<button v-on:click="say">Say</button> 





2.4.1 方法 及 内 联 语句 处 理 器 





















































通过 v-on 可 以 绑 定 实例 选项 属性 methods 中 的 方法 作为 事件 的 处 理 器 ，v-on: 后 参数 
接受 所 有 的 原生 事件 名 称 。 例 如 : 












































<button v-on:click="say">Say</button> 


var vm = new Vue({ 
el : '#app', 
data: { 
msg : 'Hello Vue.js' 


}, 
methods : { 
say : function() { 
alert (this.msg); 

















单 击 button， 即 可 触发 say 函数 ， 弹 出 alert 框 'Hello Vue.js'。 

Vue.js 也 提供 了 v-on 的 缩写 形式 ， 我 们 可 以 将 模板 中 的 内 容 改 写 为 <button @ 
click='say'>Say</button>， 这 两 句 语 句 是 等 价 的 。 

除了 直接 绑 定 methods 函数 外 ，v-on 也 支持 内 联 JavaScript 语句 ， 但 仅 限 一 个 语句 。 例 如 : 
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<button v-on:click="sayFrom ('from param')">Say</button> 


Var vm = new Vue ({ 
el : '#app', 
data: { 
msg : 'Hello Vue.js’' 
}, 
methods : { 
sayFrom: function (from) { 


alert (this.msg + '' + from); 


})5 
在 直接 绑 定 methods 函数 和 内 联 JavaScript 语句 时 ， 都 有 可 能 需要 获取 原生 DOM 
对 象 ， 以 下 两 种 方式 都 可 以 获取 : 


<button v-on:click="showEvent">Event</button> 
<button v-on:click="showEvent ($event)">showEvent</button> 
<button v-on:click="showEvent () ">showEvent</button> // 这 样 写 获取 不 到 event 

















hail 
站 
























































Var vm = new Vue (1{ 
el : '#app', 
methods : { 
showEvent : function (event) { 


console.log (event); 


上 
同一 元 素 上 也 可 以 通过 v-on 绑 定 多 个 相同 事件 函数 ， 执 行 顺序 为 顺序 执行 ， 例 如 : 
































<div v-on:click="sayFrom('first')" v-on:click ="sayFrom('second)"> 





2.4.2 ”修饰 符 
































扩 
[SY 
局 
| 
三 
hil 
ul 
到 
ey 
SS 
二 
I 
es 
NS 
富 





























Vue.js 为 指令 v-on 提供 了 多 个 修饰 符 ， 方 便 我 们 处 理 
符 可 以 串联 使 用 。 主 要 的 修饰 符 如 下 。 


.stop: 等 同 于 调用 event. stopPropagation()。 














Ef 

































































.prevent: 等 同 于 调用 event.preventDefault()。 
.capture: 使 用 capture 模式 添加 事件 监听 器 。 
.self: 只 当 事 件 是 从 监听 元 素 本 身 触 发 时 才 触 发 
使 用 方式 如 下 : 














| 由 
































a 
二 
溺 
[e] 


















































<a v-on:click.stop='doThis'></a> 
<form v-on:submit.prevent="onSubmit"></form> // 阻止 表单 默认 提交 事件 


<form v-on:submit.stop.prevent="onSubmit"></form> // 阻止 默认 提交 事件 且 阻 止 冒 泡 
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<form v-on:submit.stop.prevent></form> // 也 可 以 只 有 修饰 符 ， 并 不 绪 定 事件 



































可 以 尝试 运行 以 下 这 个 例子 ， 更 好 地 理解 修饰 符 在 其 中 起 到 的 作用 。 









































var vm = new Vue ({ 
el : '#app', 
methods : { 
saySelf (msg) { 
alert (msg); 


}); 


<div v-on:click="saySelf('click from inner')" 


v-on:click.self="saySelf('click 
from self')"> 


<button v-on:click="saySelf('button click')">button</button> 


<button v-on:click.stop="saySelf ('just button clic 


k')">button</button> 
</div> 


























除了 事件 修饰 符 之 外 ，v-on 还 提供 了 按键 修饰 符 ， 方 便 我 们 监听 键盘 事件 中 的 按键 。 例 如 : 




















<input v-on:keyup.13="submit"/> // 监听 input 的 输入 ， 当 输入 回 车 时 触发 Submit 函 
数 ( 回 车 的 keycode 值 为 13 )， 用 于 处 理 常见 的 用 户 输入 完 直 接 按 回 车 键 提交 ) 





























Vue.js 给 一 些 常 用 的 按键 名 提供 了 别称 ， 这 样 就 省 去 了 一 些 记 keyCode 的 事件 。 全 部 按 
键 别 名 为 : enter 、tab 、delete、esc、space、up、down 、left、right。 例 如 : 






































<input v-on:keyup.enter="submit" /> 

















Vue.js 也 允许 我 们 自己 定义 按键 别名 ， 例 如 : 











Vue.directive('on') .keyCodes.fl = 112; // 即 可 以 使 用 <input v-on:keyup.fl="help" /> 









































Vue.js 2.0 中 可 以 直接 在 Vue.config.keyCodes 里 添加 自 定 义 按键 别名 ， 无 需 修改 v-on 
外 令 ， 例 如 : 


Vue.config.keyCodes.{fl = 12。 























2.4.3 与 传统 事件 绑 定 的 区 别 




















如 果 你 之 前 没有 接触 过 Angularjs，ReactJS 这 类 框架 ， 或许 会 对 Vue.js 这 种 事件 监听 
方式 感到 困惑 。 毕 竟 我 们 一 开始 接受 的 理念 就 是 将 HTML 和 JS 隔离 开 编写 。 但 其 实 Vu 
事件 处 理 方法 和 表达 式 都 严格 绑 定 在 当前 视图 的 ViewModel 上 ， 所 以 并 不 会 导致 维护 困难 

而 这 么 写 的 好 处 在 于 : 

@ 无 需 手 动 管理 事件 。ViewModal 被 销毁 时 ， 所 有 的 
我 们 从 获取 DOM 绑 定 事件 然后 在 特定 情况 下 再 解 绑 这 样 的 事由 
@ 解 耘 。ViewModel 代码 是 纯粹 的 逻辑 代码 ， 和 DOM 无 关 ， 有 利于 我 们 写 
例 。 





















































































































































hl 








件 人 处 理 器 都 会 自动 被 删除 ， 让 
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化 测试 
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还 有 个 与 以 往 不 同 的 细节 是 ， 我 们 在 处 理 ul 、1i 这 种 列表 ， 尤 其 是 下 拉 刷 新 这 种 需要 异 
步 加 载 数 据 的 列表 时 ， 往 往 会 把 1i 事 件 代理 到 ul 上 ， 这 样 异 步 加 载 进 来 的 新 数据 就 不 需要 再 
次 绑 定 事件 。 而 Vue.js 这 类 的 框架 由 于 不 需要 手动 添加 事件 ， 往 往 直 接 会 把 事件 绑 定 在 1 上 ， 
类 似 这 样 :<li v-repeat="item in items" Vv-on:click="clickLi"></li>， 理 论 上 每 次 新 增 1i 的 
时 候 都 会 进行 同 1i 个 数 的 事件 绑 定 ， 比 用 事件 代理 多 耗 了 些 性 能 。 但 在 实际 运用 中 并 没有 什么 
特别 的 性 能 瓶颈 影响 ， 而 且 我 们 也 省 去 在 代理 中 处 理 e.target 的 步 又 ， 让 事件 和 DOM 元 素 关 
系 更 紧密 、 简 单 。 


)2.5 Vue.extend() 


日 件 化 开发 也 是 Vue.js 中 非常 重要 的 一 个 特性 ， 我 们 可 以 将 一 个 页 面 看 成 一 个 大 的 根 缚 
牛 ， 里 面包 含 的 元 素 就 是 不 同 的 子 组 件 ， 子 组 件 也 可 以 在 不 同 的 根 组 件 里 ]。 在 上 述 例 子 
1， 可 以 看 到 在 一 个 页 面 中 通常 会 声明 一 个 Vue 的 实例 new Vue({})) 作 大 ， 那 么 如 何 


生成 可 被 重复 使 用 的 子 组 件 呢 ? Vue.js 提供 了 Vue.extend(options) 方法 ,创建 基础 Vue 构 
造 器 的 “ 子 类 ”， 人 参数 options 对 象 和 直接 声明 Vue 实例 参数 对 象 基 本 一 致 ， 使 用 方法 如 下 : 
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Var Child = Vue.extend ({ 
template : '#child', 
// 不 同 的 是 ，el 和 data 选项 需要 通过 函数 返回 值 赋值 ， 避 免 多 个 组 件 实例 共用 一 个 数据 
data : function() { 


return { 


}) 
Vue.component('child'，Child) // 全 局 注册 子 组 件 
<child ….></child> // 子 组 件 在 其 他 组 件 内 的 调用 方式 


更 多 组 件 的 使 用 方法 将 会 在 第 6 章 中 进行 详细 的 说 明 。 
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指令 是 Vue.jj 





那 什么 叫 数 据 的 变化 映射 为 DOM 行为 ”前 文中 阐述 过 Vue.js 是 通过 数据 驱 轧 














直接 去 修改 D 



































比 时 ， 指 令 会 





































































































入 的 ， 所 以 了 
OM 结构 ， 不 会 出 现 类 似 于 $(ul1).append(<li>one</li>') 这 样 


s 中 一 个 重要 的 特性 ， 主 要 提供 了 一 种 机 制 将 数据 的 变化 映 映 为 DOM 行为 。 





我 们 




































































依据 设 定好 的 操作 对 DOM 进行 修改 ， 这 样 就 可 以 只 关注 数据 的 变化 ，| 














管理 DOM 的 变化 和 状态 ， 使 得 逻辑 更 加 清晰 ， 可 维护 性 更 好 。 
V 























ue.js 本 身 就 提供 了 大 量 的 内 置 指令 来 进行 对 DOM 的 操作 ， 我 们 也 可 以 












































本 章 主要 介绍 



























































部 分 常见 指令 的 使 用 及 场景 以 及 自 定义 指令 的 开发 和 指令 相关 的 参数 。 
) 3.1 内置 指令 


本 节 主 要 介绍 Vue.js 的 内 置 指令 。 























3.1.1 v-bind 





v=-bind 主要 用 



























































于 动态 绑 定 DOM 元 素 属 性 (attribute )， 即 元 素 属 性 实际 的 值 是 








的 操作 。 当 数 
看 不 

发 自 定义 指 
vm 























的 data 属性 提供 的 。 例 如 : 








<img v-bind:src='avatar' /> 


new Vue ({ 
data 宙 


avatar : 


志高 攻关 As 
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v-bind 可 以 简写 为 : ， 上 述 例子 即 可 简写 为 <img :Src='avatar' />。 
v-pbind 还 拥有 三 种 修饰 符 ， 分 别 为 .sync、.once、.camel， 作 用 分 别 如 下 。 
.Sync : 用 于 组 件 props 属性 ， 进 行 双向 绑 定 ， 即 父 组 件 绑 定 传递 给 子 组 件 的 值 ， 无 论 在 
哪个 组 件 中 对 其 进行 了 修改 ， 其 他 组 件 中 的 这 个 值 也 会 随 之 更 新 。 例 如 : <my-child :parent. 
sync='parent'></my-child>。 父 组 件 实 例 vm.parent 将 通过 prop 选项 传递 给 子 组 件 my- 
child， 即 my-child 组 件 构造 函数 需要 定义 选项 props:[parent]， 便 可 通过 子 组 件 自身 实例 
vm.parent 获取 父 组 件 传 递 的 数据 。 两 个 组 件 都 共享 这 一 份 数据 ， 不 论 谁 修改 了 这 份 数 据 ， 组 
咎 获取 的 数据 都 是 一 致 的 。 但 一 般 不 推荐 子 组 件 直 接 修改 父 组 件数 据 ， 这 样 会 导致 而 合 且 组 件 
I 的 数据 不 容易 维护 。 
.once : 同 .synce 一样 ， 用 于 组 件 props 属性 ， 但 进行 的 是 单 次 绑 定 。 和 双向 绑 定 正好 
反 ， 单 次 绑 定 是 将 绑 定 数据 传递 给 子 组 件 后 ， 子 组 件 单 独 维护 这 份 数据 ， 和 父 组 件 的 数据 
再 无 关系 ， 父 组 件 的 数据 发 生变 化 也 不 会 影响 子 组 件 中 的 数据 。 例 如 : <my-child :parent. 
once='parent'></my—child> 
.camel : 将 绑 定 的 特性 名 字 转 回 驼峰 命名 。 只 能 用 于 普通 HTML 属性 的 绑 定 ， 通 常会 用 了 
svg 标签 下 的 属性 ， 例 如 : <svg width='400' height='300' :view=-box.camel='viewBox'></Svg>， 
输出 结果 即 为 <svg width="400" height="300" viewBox="……."></svg> 
不 过 在 Vue.js 2.0 中 ,修饰 符 .syce 和 .once 均 被 废弃 ， 规 定 组 件 间 仅 能 单 向 传递 ， 如 果 
子 组 件 需要 修改 父 组 件 ， 则 必须 使 用 事件 机 制 来 进行 处 理 。 


















































































































































































































































































































































































































































































































































| 王 






























































































































































































































































3.1.2 v-model 


v-model 指令 在 第 2.2.3 小 节 中 的 表单 控件 中 已 经 说 明 过 了 ， 这 里 就 不 再 蓝 述 了 。 该 指 
令 主 要 用 于 input、select 、textarea 标签 中 ， 具 有 1lazy、numper 、depbounce (2.0 废除 )、 
trim (2.0 新 增 ) 这 些 修 饰 符 。 



































































































































3.1.3 v-if/v-else/v-show 


v-if/v-else/v-show 这 三 个 指令 主要 用 于 根据 条 件 展示 对 应 的 模板 内 容 ， 这 在 第 
2.3.2 小 节 的 泻 染 语法 中 也 进行 了 说 明 。v-if 和 v-show 的 主要 区 别 就 在 于 ，v-if 在 条 
件 为 false 的 情况 下 并 不 进行 模板 的 编译 ， 而 v-show 则 会 在 模板 编译 好 之 后 将 元 素 隐 藏 
掉 。v-if 的 切换 消耗 要 比 v-show 高 ， 但 初始 条 件 为 false 的 情况 下 ，v-if 的 初始 演 染 要 
稍 快 。 


















































































































































3.1.4 v-for 


v-for 也 是 用 于 模板 泻 染 的 指令 ， 在 第 2.3.3 小 节 列 表演 当中 我 们 也 已 说 明 过 ， 这 里 就 不 
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再 费 述 。 币 见 用 法 如 下 : 























<ul> 
<li v-for=' (index, item) in items'> 


<p>{{ item.name }}</p> 


XL 
</ul> 
























































vfor 指令 用 法 在 Vue.js 2.0 中 做 了 些 细微 的 调整 ， 大 致 包含 以 下 几 个 方面 : 
1. 参数 顺序 变化 
当 包 含 参数 index 或 key 时 ， 对 象 参数 修改 为 (item, index ) 或 (value,，key )， 这 样 
与 JS Array 对 象 的 新 方法 forEach 和 map， 以 及 一 些 对 象 奖 代 器 (例如 lodash ) 的 参数 能 保 
持 一 致 。 
2. v-bind:key 


E 


盟 性 track 一 by 被 v-bind : key 代替 ，<div v-for='"item in items" tranck-by="id"> 需 
要 改写 成 <div v-for='"item in items" v-bind:key='"item.id">。 
3. nin 10 
v-for=" in 10" 中 的 n 由 原来 的 0 ~ 9 友 代 变 成 1 ~ 10 迭代 。 













































































3.1.5 V-on 


v-on 指令 主要 用 于 事件 绑 定 ， 在 第 2.4 节 中 我 们 已 经 说 明 。 回 顾 一 下 用 法 : 







































































<button v-on:click='onClick'></button> 


v-on 可 以 简写 为 : 








<button Q@click='onClick'></button> 





修饰 符 包 括 .stop、.prevent、.capture、.self 以 及 指定 按键 {keyCode|keyAlias}。 
在 Vue.js 2.0 中 ， 在 组 件 上 使 用 v-on 指令 只 监听 自 定义 事件 ， 即 使 用 $emit 触发 的 
事件 ; 如 果 要 监听 原生 事件 ， 需 要 使 用 修饰 符 .native， 侈 


native="onClick"></my—-component>。 
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出 















































如 <my-component v-on:click. 


起 

















3.1.6 v-text 









































Vtext， 参 数 类 型 为 String， 作 用 是 更 新 元 素 的 textContent。{{}} 文本 插值 本 身 也 会 
被 编译 成 textNode 的 一 个 v-text 指令 。 而 与 直接 使 用 {{}} 不 同 的 是 ，v-text 需要 绑 定 在 革 
个 元 素 上 ， 能 避免 未 编译 前 的 闪现 问题 。 例 如 : 






















































































<span v-text="msg"></span> 










































































如 果 直 接 使 用 <span>{{msg}}</span>， 在 生命 周期 beforeCompile 期 间 ， 此 刻 msg 净 
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尚未 编译 至 {{msg}} 中 ， 用 户 能 看 


用 v-text 的 话 则 不 会 有 这 个 问题 ， 








到 
































到 熏 












































如 图 已 = 二 所 示 。 


经 间 的 {{msg}}， 然 后 内 现 为 There is a message， 





























































































































Pata rn eb 可 F 司 x 器 Elements Console Sources Network Timeline » i 
msg} So» ; | 3.1.html x 
{{ v 吕 top <script ER 
vComew | 16 "Vel: vdapp'， 
* MM Users/ 开 0 | 'There is a message' 
29 beforeConpitel) { 
21| debugger; 
Ds 
2 </script> 
25 </body> 
26 </html> 
图 3-1 
3.1.7 v-HTML 
v-HTML, 参数 类 型 为 String, 作用 为 更 新 元 素 的 innerHTML， 接受 的 字符 捉 不 会 进行 
编译 等 操作 ， 按 普通 HTML 处 理 。 同 v-text 类 似 ，{{ 人 0})} 插值 也 会 编译 为 节点 的 v-HTML 
指令 ，v-HTML 也 需要 绑 定 在 某 个 元 素 上 且 能 避免 编译 前 闪现 问题 。 例 如 

































































<div>{{{HTML}}}</div> 
<div v-HTML="HTML"></div> 





3.1.8 v-el 





v=-el 指令 为 DOM 元 素 注册 
可 以 通过 所 属实 例 的 $els 属性 调 





屋 
Ea 





















































三 














了 一 个 索引 ， 使 得 我 们 可 以 直接 访问 DOM 元 素 。 语 法 上 说 ， 
Jo 例如 : 

















<div v-el:demo>there is a el 





vm. $els.demo.inner!] 


demo</div> 


Text // -> there is a el demo 




















或 者 在 v 
男 外 ， 








调 








内 部 通过 this 进行 





对 
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小 写 ,在 v-el 



































HMTL 不 区 分 大 





如 果 使 








了 了 驼峰 式 命 名 ， 系 统 会 





动 转 成 














6 




















6 





oT 





小 写 。 但 可 以 











来 连接 你 期 望 大写 的 字母 。 例 和 








/Hy 


1 : 








<div v-el:camelCase>There is a camelcase</div> 





<div v-el:camel-case>There is a camelCase</div> 


vm.$Sels.camelcase.innerText // -> There is a camelcase 


vm.$els.camelCase.innerText // -> There is a camelCase 





3.1.9 v-ref 



































六 ， 只 不 过 v-reff 














于 子 组 件 








上 ， 实 例 可 以 通过 $refs 访问 子 组 






































件 。 命 名 方式 也 类 似 ， 想 使 








驼峰 式 命名 的 话 用 “ 











来 做 连接 。 例 如 : 
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<message v-ref:title content="title"></message> 
<message v-ref:sub-title content="subTitle"></message> 
Var Message = Vue.extenad (1{ 

beeps ee 本 

template : '<hl>{{content}}</h1l>' 
人 
Vue .component ('message', Message); 




















我 们 最 终 将 vm.$refs.title 和 vm.$refs.subTitle 用 console.log 的 方式 打印 到 控 种 
结果 为 : 








= 























bp VueComponent {$el: hl, $parent: Vue, $root: Vue, $children: Array[8], $refs: Object..} 
* VueComponent {$el: hl, $parent: Vue, $root: Vue, $children: Array{[8], $refs: Object..} 


输出 了 两 个 子 组 件 的 实例 。 
从 理论 上 来 说 ， 我 们 可 以 通过 父 组 件 对 子 组 件 进行 任意 的 操作 ， 但 实际 上 尽量 还 是 会 采用 
props 数据 绑 定 ， 用 组 件 间 通信 的 方式 去 进行 逻辑 上 的 交互 ， 尽量 让 组 件 只 操作 自己 内 部 的 数据 和 
状态 ， 如 果 组 件 间 有 通信 ， 也 通过 调用 组 件 暴露 出 来 的 接口 进行 通信 ， 而 不 是 直接 跨 组 件 修改 数据 。 
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3.1.10 v-pre 

















v-pre 指令 相对 简单 ， 就 是 跳 过 编译 这 个 元 素 和 子 元 素 ， 显 示 原 始 的 {{}}Mustache 标 
签 ， 用 来 减少 编译 时 间 。 例 如 : 



































<div v-pre>{{ uncompiled}}</div> 
Var vm = new Vuel{ 
el : '#app', 
data: { 
uncompiled : 'Thers is an uncompiled element' 





最 后 输出 : 
<!l— VvV-pre 一 > 
<div>{{ uncompiled }}</div> 一 $6 
/div 


3.1.11 v-cloak 


v-cloak 指令 相当 于 在 元 泰 上 添加 了 一 个 [v-cloak] 的 属性 ， 和 直到 关联 的 实例 结束 编译 。 
官方 推荐 可 以 和 css 规则 [v-cloak]{ display :none } 一 起 使 用 ， 可 以 隐藏 未 编译 的 Mustache 
标签 站 到 闲 例 ? 备 完 := 从 如 : 























































































































<div v-cloak>{{ msg }}</div> 
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3.2 ， 自 定义 指令 基础 


3.1.12 v-once 


v-once 指令 是 Vue.js 2.0 中 新 增 的 内 置 指 令 ， 用 于 标明 元 素 或 组 件 只 演 染 一 次 ， 即 使 了 


























Ey 















































后 发 生 绑 定数 据 的 变化 或 更 新 ， 该 元 素 或 组 件 及 包含 的 子 元 素 都 不 会 再 次 被 编译 和 演 染 。 这 和 相 














HT 
































就 相当 于 我 们 明确 标注 了 这 些 元 素 不 需要 被 更 新 ， 所 以 v-once 的 作用 是 最 大 程度 地 提升 ] 
新 行为 中 页 面 的 性 能 ， 可 以 略 过 一 些 明确 不 需要 变化 的 步 又。 使 用 方式 如 下 ; 



























































































































































<span v-once> 
<my-component 


{msg}}</span> 
v-once :msg='msg'></my-component> 





) 3.2 ” 自 定 义 


旨 令 基础 











除了 内 置 指令 外 ，Vue.js 也 提供 了 方法 让 我 们 可 以 注册 自 定义 指令 ， 以 便 封 装 对 DOM 












































元 素 的 重 的 处 理 行为 ， 























提高 代码 复 用 率 。 本 小 节 主 要 说 明了 如 何 创建 、 注 册 EE 义 指令 ， 以 及 









































讲述 指令 的 相关 属性 钩子 函数 ， 更 深 一 步 地 了 解 指令 在 Vue.js 中 起 到 的 作用 。 



























































3.2.1 指令 的 注册 











我 们 可 以 通过 V 








ue.directive(id，definition) 方法 注册 一 个 全 局 自 定 义 指令 ， 接 收 参 数 id 









































Vue.directive( 























有 赋予 这 个 指令 任何 功能 。 




















和 定义 对 象 。id 是 指令 的 唯一 标识 ,定义 对 象 则 是 指令 的 相关 属性 及 钧 子 函数 。 例 如 : 














“global-directive”，definition); // 我 们 暂时 只 注册 了 这 个 指令 ， 并 没 








































































































我 们 可 以 在 模板 中 这 么 使 用 : 
<div v-global-directive></div> 
而 除了 全 局 注册 指令 外 ， 我 们 也 可 以 通过 在 组 件 的 directives 选项 注册 一 个 局 部 的 自 定 
义 指 令 O 例如 : 
Var comp = Vue.extend ({ 
directives : I 
'JocalDirective' : {} // 可 以 采用 驼峰 式 命 名 


} 
}); 











该 指令 就 只 能 在 当前 组 件 内 通过 v-local-directive 的 方式 调用 ， 而 无 法 被 其 他 组 件 调 用 。 







































































二 


3.2.2 ”指令 的 定义 对 象 





我 们 在 注册 指令 的 同时 ， 可 以 传 入 definition 定义 对 象 ， 对 指令 赋予 一 些 特殊 的 功能 。 这 











个 定义 对 象 主 要 包含 三 


























bind: 只 被 调用 一 次 ， 在 指令 第 一 次 绑 定 到 元 素 上 时 调用 。 





个 钧 子 函数 : bind、update 和 unbind。 


















































update : 指令 在 











bind 之 后 以 初始 值 为 参数 进行 第 一 次 调用 ， 之 后 每 次 当 绑 定 值 发 生变 化 
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第 3 章 指令 
时 调用 ，update 接收 到 的 参数 为 newValue 和 oldValue 
unbind : 指令 从 元 素 上 解 绑 时 调用 ， 只 调用 一 次 。 
函数 都 是 可 选 函 数 ， 但 注册 一 个 空 指令 肯定 没有 意义 ,来 看 下 面 这 个 例子 ， 会 使 
We ss 周期 有 更 明确 的 认识 。 
<div v-if="isExist" v-my-directive="param"></div> 
Vue.directive('my-directive', { 
binid. » functLron() + 
console.log('bind', arguments); 
update function (newValue, oldValue) { 
console.log('update', newValue, oldValue) 
unbind : function() { 
console.log('unbind', arguments); 
}) 
Var vm = new Vue (1{ 
el '#app', 
data 3 4 
param © "fixst™ > 
isExist true 
| 
上 
我 们 在 控制 台 里 先后 输入 vm.param ='second' 和 vm.isExist = false， 整 体 输出 如 下 : 
bind [1] 
update first undefined 
vm.param = 'second' 
update second first 
"second" 
vm.isExist = false 
unbind [] 
false 
另外， 如 果 我 们 只 需要 使 用 update 函数 时 ， 可 以 直接 传 入 一 个 函数 代替 定义 对 象 : 
Vue.directive('my-directive', ftunction (value) { 
// 该 函数 即 为 update 函数 
) 
[ 述 例子 中 ， 可 以 使 用 my-directive 指令 绑 定 的 值 是 data 中 的 param 属性 。 也 可 以 直 
接 绑 定 字符 串 和 常量 ,或 使 用 字面 修饰 符 ， 但 这 样 的 话 需要 注意 update 方法 将 只 调用 一 次 ， 基 
为 普通 字符 串 不 能 响应 数据 变化 。 例 如 : 
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3.2 ， 自 定义 指令 基础 





<div v-my-directive="constant string"/></div> // -> value 为 undefined， 因 


为 data 中 没有 对 应 的 属性 


<div v-my-direcitve="'constant string'"></div> // 


string， 绑 定 字符 串 需 要 加 单 引号 


<div v-my-directive.literal="constant string"></div> // 


string， 利 用 字面 修饰 符 后 无 需 使 用 单 引号 


-> value 


为 constant 


-> value 为 constant 

















I 


除了 字符 串 外 ， 指 令 也 能 接受 对 象 字 








重 史 























任意 合法 的 JavaScript 表达 式 。 例 如 : 





<div v-my-directive="{ title 'Vue.jJs', 


<div v-my-directive="isExist ? "yes 


author 


You yy™ S</oLv> 
"WoT S/div> 





update Object {title: "Vue.j}s", author: "You"} underf 























































































































































































































update no undefined 

注意 此 时 对 象 字 面 量 不 需要 用 单 引 号 括 起 来 ,这 和 字符 上 串 常 量 不 一 样 。 
3.2.3 指令 实例 属性 

除了 了 解 指令 的 生命 周期 外 ， 还 需要 知道 指令 中 能 调用 的 相关 属性 ， 以 便 我 们 对 相关 
DOM 进行 操作 。 在 指令 的 钩子 函数 内 ， 可 以 通过 this 来 调用 指令 实例 。 下 面 就 详细 说 明 指 令 
的 实例 属性 。 

el : 指令 绑 定 的 元 素 。 

vm : 该 指令 的 上 下 文 ViewModel， 可 以 为 new Vue0 的 实例 ， 也 可 以 为 组 件 实例 。 

expression : 指令 的 表达 式 ， 不 包括 参数 和 过 滤器 。 








arg : 指令 的 参数 。 





name : 指令 的 名 字 ， 不 包括 v- 前 级 。 
modifiers : 一 个 对 象 ， 包 含 指令 的 修饰 符 。 





descriptor : 一 个 对 象 ， 包含 指令 的 解 届 
我 们 可 以 通过 以 下 这 个 例子 ， 更 直观 地 ] 


es 


Ff 结果 。 


解 到 这 些 




















出 









































<div v-my-msg:console.log="content"></div> 


Vue.directive('my-msg', { 








bind 3 function() { 
console.l1log('~~~~~~~~~~~ bind~~ ~ 
console.log('el', this.el); 
console.log('name', this.name); 
console.log('vm', this.vm); 
console.log('expression', this.expression); 
console.log('arg', this.arg); 
console.log('modifiers', this.modifiers); 
console.log('descriptor', this.descriptor); 
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第 3 章 指令 


update : function (newValue, oldValue) 


{ 


Var keys = Object.keys (this.modifiers); 


window[this.arg] [keys[0]] (newValue); 


}, 
unbind : function() { 
} 

] ) 7 

var vm = new Vue({ 


el : '#app', 
data : { 
content : 'there is the content' 
} 
}); 








输出 结果 如 下 : 





~~bind ~~ 
el div></div 

name my-msg 

vm 


py Vue {$el: div#app, S$parent: undefined, $root: Vue, $children: Array[8], 


S$refs: Object.} 
expression content 
arg console 
modifiers Object {log: true} 
descriptor 


po 
Object, arg: "console"..} 


there is the content 


3.2.4 ”元素 指 令 


Object {name: "my-msg", attr: "v-my-msg:console.log", raw: 


3.1.html:39 
3.1.html:40 
3.1.html:41 
3.1.html:42 


3.1.html:43 
3.1.html:44 
3.1.html:45 
3.1.html:46 


"content", def: 


3.1.html:56 

















元 素 指令 是 Vue.js 的 一 种 特殊 指令 ， 善 通 指令 需要 绑 定 在 
元 素 指令 可 以 单独 存在 ， 从 使 用 方式 上 看 更 像 是 一 个 组 从 
























































是 和 指令 一 致 的 。 例 如 : 



































体 的 DOM 元 素 上 ， 但 





























EF， 但 本 身 内 部 的 实例 





属性 和 钩子 函数 











<div v-my-directive></div> // -> 普通 指令 


使 用 方式 


<my-directive></my-directive> // -> 元 素 指令 使 用 方式 










































































元 素 指 令 的 注册 方式 和 普通 指令 类 似 ， 也 有 全 局 注册 和 局 部 注册 两 种 
Vue .elementDirective('my-ele-directive') // 全 局 注册 方式 











var Comp = Vue.extend({  // 局 部 注册 ， 仅 限 该 组 件 内 使 用 


// 省 略 了 其 他 参数 
elementDirectives : { 


'eleDirective' : {} 
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3.3 ”指令 的 高 4 


Vue .component ('comp', Comp); 












































元 素 指令 不 能 接受 参数 或 表达 式 ， 





日 可 以 读 取 元 素 特性 从 而 决定 行为 。 而 且 当 编译 过 程 



























































山 


' 过 3 
素 及 其 子 元 素 。 
Vue.js 2.0 中 取消 了 这 个 特性 


) 3.3 ”指令 的 高 级 选项 




































































a 





荐 使 用 组 件 来 实现 需要 的 业务 。 



































但 
j 一 个 元 素 指令 时 ，Vue.js 将 忽略 该 元 素 及 其 子 元 素 ， 只 有 元 素 指令 本 身 才 可 以 操作 该 元 
































Vue.js 指令 定义 对 象 中 除了 钧 子 函数 外 ， 还 有 一 些 其 他 的 选项 ， 我 们 将 在 本 节 中 对 
逐个 的 讲述 。 


























3.3.1 params 


定义 对 象 中 可 以 接受 一 个 params 数组 ，Vue.js 编译 器 将 自动 提取 自 定义 指令 绑 定 元 素 





















































上 的 这 些 属性 。 例 如 : 


而 

















其 做 








<div v-my-advance-directive a="paramA"></div> 
Vue.directive('my-advance-directive', { 
params : ['a'], 
bind : function() { 
console.log('params', this.params); 





params Object {a: "paramA"} 




















除了 直接 传 入 数值 外 ，params 支持 绑 定 动态 数据 
数据 变化 时 ， 会 调用 这 个 回调 函数 。 例 如 : 





a 
站 


















































且 可 以 设 定 一 个 watcher 监听 ， 


当 





<div v-my-advance-directive v-bind:a="a"></div> 
// 当然 也 可 以 简写 成 <div v-my-advance-directive :a="a"></div> 


Vue.directive('my-advance-directive', { 








params : ['a']， 
paramWatchers : { 
a 了 funoction{tval; Gldvaly 4 
console.log('watcher: ', val, oldVal) 


D> 
binid. 3 function() { 
console.log('params', this.params); 


上 学 
Var vm = new Vue (1{ 
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el : '#app', 
data { 
a 'dynamitc data' 





params Object {a: "dynamic data"} 
vm.a = 123 

watcher: 123 dynamic data 

123 


E 义 指令 作用 于 一 个 对 象 上 上 时， 我们 可 以 使 用 deep 选项 来 监听 对 象 内 部 发 生 的 











k 



































DH 


























化 。 例 如 : 





<div v-my-deep-directive="obj"></div> 
<div v-my-nodeep-directive="obj"></div> 
Vue.directive('my-deep-directive', { 
deep : true, 
update : function (newValue, oldValue) { 
console.log('deep', newValue.a.b); 
} 
Ey 
Vue.directive('my-nodeep-directive', { 
update : function (newValue, oldValue) { 
console.log('deep', newValue.a.b); 
} 
}); 


var vm = new Vue (1{ 
el : '#app', 
data 3 1 
oBJ] : 
a { 
b 'inner' 


}) 



































运行 后 ， 在 控制 台中 输入 vm.obj.a.b = 'inner changed'， 只 有 my-deep-directive 调用 











了 update 函数 ， 输 出 了 改变 后 的 值 。 
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Vue.js 2.0 


3.3 ”指令 的 高 级 选项 


deep inner 
nodeep inner 
vm.obj.a.b = 'inner changed 
deep inner changed 

"inner changed" 


> | 














废弃 了 该 选项 。 





3.3.3 twoWay 


































































































在 自 定 义 指 令 中 ， 如 果 需 要 向 Vue 实例 写 回 数据 ， 就 需要 在 定义 对 象 中 使 用 twoWay :true， 
这 样 可 以 在 指令 中 使 用 this.set(value) 来 写 回 数据 。 


















































<input type="text" v-my-twoway-directive="param" 


-> 


Vue.directive('my-twoway-directive', { 


twoWay 
bind 


this.handler = 
console.log('value changed: 


七 天 已 全/ 


function() { 


下 向 六 记 二 证 宫 丫 (并 
', this.el.value); 


this.set (this.el.value) 
Bind(tthis) 


this.el.addEventListener('input', 


上 


unbind: 


this.el.removeEventListener('input', 


} 
}); 


this.handler) 


function () { 
this.handler) 





















































var vm = new Vue ({ 
el '#app', 
data 
param 和 
}) 5; 
此 时 在 input 中 输入 文字 ， 然 后 在 控制 台中 输入 vm.param 即 可 观察 到 实例 的 param 属 
性 已 被 改变 。 
value changed: 1 
value changed: 12 
value changed: 123 
value changed: 1231 
value changed: 12312 
value changed: 123123 
vm. param 
"123123" 
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需要 注意 的 是 ， 如 果 没 有 设 定 twoWay :true， 就 在 自 定义 指令 中 调用 this.set0 ，Vue.js 


会 抛 出 异常 。 
































(4) > [Vue warn]: Directive.set() can only be used inside 
twowaydirectives. 


> 


3.3.4 acceptStatement 


选项 acceptStatement:true 可 以 允许 自 定 义 指令 接受 内 联 语 句 ， 同 时 update 函数 接收 
的 值 是 一 个 函数 ， 在 调用 该 函数 时 ， 它 将 在 所 属实 例 作用 域内 运行 。 




















ee 






























































<div v-my-directive="i++"></div> 
Vue.directive('my-directive', { 
acceptSstatement: true, 
update: function (fn) { 
上 
}) 
Var vm = new Vue ({ 
el : '#app', 
data : { 
二 0 


}); 














如 果 在 update 函数 中 ， 运 行 np0， 则 会 执行 内 联 语句 寺 +， 此 时 vm.i = 1。 但 更 改 vm.i 
并 不 会 触发 update 函数 。 
需要 当心 的 是 ， 如 果 此 时 没有 设 定 acceptStatement: true， 该 指令 会 陷入 一 个 死 循 环 
I。Vv-my-statement-directive 接受 到 i 的 值 每 次 都 在 变化 ， 会 重复 调用 update 函数 ， 最 
终 导致 Vue.js 抛 出 异常 。 



















































































3.3.5 terminal 


选项 terminal 的 作用 是 阻止 Vue.js 遍历 这 个 元 素 及 其 内 部 元 素 ， 并 由 该 指令 本 身 去 编译 
绑 定 元 素 及 其 内 部 元 素 。 内 置 的 指令 v-i 和 v-for 都 是 terminal 指令 。 
使 用 terminal 选项 是 一 个 相对 较为 复杂 的 过 程 ， 你 需要 对 Vue.js 的 编译 过 程 有 一 定 的 了 
解 ， 这 里 借助 官网 的 一 个 例子 来 大 致 说 明 如 何 使 用 terminal。 


<div id="modal"></div> 


































































































































































































加 
灶 

















<div v-inject:modal> 
<hl>header</h1l> 
<p>body</p> 
<p>footer</p> 
</div> 
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var FragmentFactory = Vue.FragmentFactory // Vue.js 全 局 API， 用 来 创造 fragment 
的 工厂 函数 ，fragment 中 包含 了 具体 的 scope 和 DOM 元 素 ， 可 以 看 成 一 个 独立 的 组 件 或 者 实例 。 

var remove = Vue.util.remove // Vue.js 工 具 类 函数 ， 移 除 DOM 元 素 

var createAnchor = Vue.util.createAnchor // 创建 锚 点 ， 锚 点 在 debug 模式 下 是 
注释 市 点 ， 非 debug 模式 下 是 文本 节点 ， 主 要 作用 是 标记 dom 元 素 的 插入 和 移 除 

Vue.directive('inject', { 


terminal: true, 


bind: function () { 
var container = document.getElementById(this.arg) // 获取 需要 注入 到 的 DOM 元 素 
this.anchor = createAnchor ('v-inject') // 创建 v-inject 锚 点 


container.appendChild(this.anchor) // 锚 点 挂 载 到 注入 节点 中 
remove (this.el) // 移 除 指令 绑 定 的 元 素 
var factory = new FragmentFactory(this.vm, this.el) // 创建 fragment 
this.frag = factory.create (this. Nosty this: scope, this, frag) 
// this. host 用 于 表示 存在 内 容 分 发 时 的 父 组 件 
// this. scope 用 于 表示 存在 v-for 时 的 作用 域 
// this. frag 用 于 表示 该 指令 的 父 fragment 
this.frag.before (this.anchor) 
}， 
unbind: function () { 





this.frag.remove() 


remove (this.anchor) 


}) 


最 终 我 们 得 到 的 结果 是 : 











v=<div id="modal”> 一 





Y<div 
<hi>header</h1 
p>body</p> 
p>footer</p 
</div> 
</div> 
</div> 


3.3.6 priority 


选项 priority 即 为 指定 指令 的 优先 级 。 普 通 指令 默认 是 1000，termial 指令 默认 为 
2000。 同 一 元 素 上 优先 级 高 的 指令 会 比 其 他 指令 处 理 得 早 一 些 ， 相 同 优先 级 则 按 出 现 顺序 依 
次 处 理 。 以 下 为 内 置 指令 优先 级 顺序 : 














































































































export const ON = 700 

export const MODEL = 800 
export const BIND = 850 

export const TRANSITION = 1100 
export const EL = 1500 

export const COMPONENT = 1500 
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第 3 章 指令 
export const PARTIAL = 1750 
export const IF = 2100 
export const FOR = 2200 
export const SLOT = 2300 





) 3.4 ”指令 在 Vue.js 2.0 中 的 变化 




















于 指令 在 Vue.js2.0 

















! 发 生 了 比较 大 的 变化 ， 所 以 本 


单独 来 艺 














河 


这 些 情 况 。 总 得 了 























说 ，Vue.js 2.0 中 
更 专注 于 本 身 作 


的 指令 
] 域 的 操作 ， 而 















































量 不 去 影响 指令 外 的 DOM 


3.4.1 新 的 钩子 函数 


整个 组 件 都 完成 了 update 状态 后 即 所 有 


钧 子 函 数 增加 了 一 


个 componentUpdated， 当 : 





功能 更 为 单一 ， 很 多 和 组 件 重复 的 功能 
尽 











和 作用 都 进行 了 
元 素 及 数据 。 


4 


H 除 ， 指 令 















































DOM 都 更 新 后 调用 该 钩子 函数 ， 无 论 指令 








3.4.2 ”钩子 国 数 实例 和 参数 变化 











在 Vue.js 2.0 消 了 指令 实例 i 
关 属 性 。 指 令 的 相关 属性 均 通 过 















































参数 的 形式 传递 给 钧 子 函 数 。 




















令 接 受 的 参数 是 否 发 生 


这 一 概念 ， 即 在 钩子 函 





变化 。 


数 











的 this 并 不 能 指向 指令 的 相 








Vue.directive('my-directive', { 
bind : 
console. 





function(el, binding, vnode) { 
log(! 
“el. LL) 


"Hinding",y 


console.1log 


( 
console.log( binding}: 
( 


console.log('vnode', vnode); 


r 


update functionl(el, binding, vnode, 


这 


componentUpdatedl(el, binding, vnode, 


r 


unbind : function(el, binding, vnode) { 





oldVNode) { 


oldVvNode) { 





~—~—~—~~—~~bind——~—~—~—~~~~ 

el pdiv 

binding » opject {name: "my-directive", value: "first", expression: "param", modifiers: Object} 
vnode pyNode {tag: "div", data: Object, children: undefined, text: undefined, elm: div..} 
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在 Vue.js 1.0 的 实例 中 的 属性 大 部 分 都 能 在 binding 中 找到 ，vnode 则 主要 包含 了 节点 
的 相关 信息 ， 有 点 类 似 于 fragment 的 作用 。 













































































3.4.3 update 函数 触发 变化 


钧 子 函 数 update 对 比 Vue.js 1.0 也 有 了 以 下 两 点 变化 : 
@ 指令 绑 定 bind 函数 执行 后 不 直接 调用 update 函数 。 
只 要 组 件 发 生 重 绘 ， 无 论 指令 接受 的 值 是 否 发 生变 化 ， 均 会 调用 update 函数 。 如 果 
需要 过 滤 不 必要 的 更 新 ， 则 可 以 使 用 binding.value == binding.oldValue 来 判断 。 

































































































































































3.4.4 ”参数 binding 对 象 


钩子 函数 接受 的 参数 binding 对 象 为 不 可 更 改 ， 强 行 设 定 binding.value 的 值 并 不 会 引起 
实际 的 改动 。 如 果 非 要 通过 这 种 方式 进行 修改 的 话 ， 只 能 通过 el 直接 修改 DOM 元 素 。 
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第 2 章 文 本 插 信 


Nf 





在 
符 表示 ， 例 如 : 


























1 














我 们 提 到 过 ，Vue.js 允许 在 表达 式 后 面 添加 可 选 的 过 滤器 ， 以 管道 























{{ message | capitalize }} 

















过 滤器 的 本 质 是 一 个 函数 ， 接 受 管道 符 前 面 的 值 作为 初始 值 ， 同 时 也 能 接受 额外 的 参数 ， 
返回 值 为 经 过 处 理 后 的 输出 值 。 多 个 过 滤器 也 可 以 进行 串联 。 例 如 : 





































































































{{ message | filterA 'argl' ‘'arg2" } 
{{ message | filterA | filterB}} 
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我 们 也 列举 了 Vuejs 1.0 中 内 置 的 指令 来 说 明 其 作用 ， 本 章 则 主要 来 讲 如 何 注册 和 使 用 
义 过 滤器 。 
) 4.1 ”过 滤器 注册 


Vue.js 提供 了 如 
数 两 个 参数 。 例 如 : 






























































| 


局 方法 Vue.filter0 注册 一 个 自 定义 过 滤器 ， 接 受过 滤器 ID 和 过 滤器 函 








Vue.filter('date', function(value) { 
if(!value instanceof Date) return value; 
return value.toLocaleDateString(); 

} 
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证 
六 
> 
Str 
绍 
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这 样 注册 之 后 ， 我 们 就 可 以 在 vm 实例 的 模板 











<div> 
{{ date | date }} 

</div> 

Var vm = new Vuelt{ 
el : '#app', 
data: { 


date : new Date() 
} 
1 


除了 初始 信 














> 外 ， 过 滤器 也 能 接受 任意 数量 的 参数 。 例 如 : 





I 














Vue.filter('date', function(value, format) { 
Var' iO: 
"M+": value.getMonth() + 1，// 月份 
"d+": Value.getDate ()，// 日 
"ht+": value.getHours ()，// 小 时 


"mt+": value.getMinutes ()，// 分 
"s+": value.getSeconds ()，// 秒 
上 
if (/(y+)/.test (format)) 
format = format.replace (RegExp.$1, (value.getFullYear() + ""). 
substr(4 - RegExp.$1.1length)); 
for (var k in o) 
if (new RegExp ("(" 二 KK + ")") .test(format)) 
format = format.replace (RegExp.$1, (RegExp.$1.length == 1) 
? (o[k]) 
《QT + OK .SuBbstr(("™™ + Glk]l})y.. .Length))}s 


return format; 
上 这 


使 用 方式 即 为 : 











二 




















交加 主 如 六 
{{ date | date 'yyyy-MM-dd nh:mm:ss'}} //-> 2016-08-10 09:55:35 即 可 
按 格式 输出 当前 时 间 


</div> 





) 4.2 ”双向 过 滤器 

之 前 提 及 的 过 滤器 都 是 在 数据 输出 到 视图 之 前 ， 对 数据 进行 转化 显示 ， 但 不 影响 数据 本 
身 。Vue.js 也 提供 了 在 改变 视图 中 数据 的 值 ， 写 回 data 绑 定 属性 中 的 过 滤器 ， 称 为 双向 过 滤 
丹 。 例如 : 














yl 
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第 4 章 ”过 滤器 








<input type="text" v-model="price | cents" > 
// 该 过 滤器 的 作用 是 处 理 价 钱 的 转化 ， 一 般 数 据 库 中 保存 的 单位 都 为 分 ， 避 免 浮 点 运算 
Vue.filter('cents', { 
read : function(value) { 
return (value / 100) .toFixed (2); 
}, 
write : function(value) { 


return value * 100; 
}) 


var vm = new Vue ({ 
el : '#app', 
datas 
price : 150 









































从 使 用 场景 和 功能 来 看 ， 双 向 过 滤器 和 第 2 章 中 提 到 的 计算 属性 有 点 雷同 。 而 Vue.js 2. 


1 一 


























也 取消 了 过 滤器 对 v-model、v-on 这 些 指令 的 文 持 ， 认 为 会 导致 更 多 复杂 的 情况 ， 而 且 使 
起 来 并 不 方便 。 所 以 Vue.js 2.0 中 只 允许 开发 者 在 {{}} 标签 中 使 用 过 滤器 ， 像 上 述 对 写 操 
年 有 转化 要 求 的 数据 ， 建 议 使 用 计算 属性 这 一 特性 来 实现 。 


) 4.3 ”动态 参数 


过 滤器 除了 能 接受 单 引 号 (" ) 括 起 来 的 参数 外 ， 也 支持 接受 在 vm 实例 中 绑 定 的 数据 ， 
称 之 为 动态 参数 。 使 用 区 别 就 在 于 不 需要 用 单 引号 将 参数 括 起 来 。 例 如 : 













































































































































































































































































DH 












































<input type="text" v-model="price" /> 





<span>{{ date | dynamic price }}</span> 


Vue.filter('dynamic', functionl(date, price) { 
return date.toLocaleDateString () 
}) 


Var vm = new Vue({ 


Lee 


el : '#app', 
[ER 
date : new Date(), 


Brice 3 :150 

















过 滤器 中 接受 到 的 price 参数 即 为 vm.price。 
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4.4 过 滤器 在 Vue.js 2.0 中 的 变化 


) 4.4 ”过 滤器 在 Vue.js 2.0 中 的 变化 


过 滤器 在 Vue.js 2.0 中 也 发 生 了 一 些 变 化 ， 大 致 说 明 如 下 : 

Q 取消 了 所 有 内 置 过 滤器 ， 即 capitalize，uppercase，json 等 。 作 者 建议 尽 : 
的 插件 来 按 需 加 入 你 所 需要 的 过 滤器 。 不 过 如 果 你 觉得 仍然 想 使 用 这 些 Vue.js 1.0 中 的 内 置 过 
滤器 ， 也 不 是 什么 难 办 的 事 。1.0 源码 filters/ 目录 下 的 index.js 和 array=-filter.js 中 就 是 所 
有 内 置 过 滤器 的 源码 ， 你 可 以 挑选 你 想 用 的 手动 加 到 2.0 中 。 

@ 取消 了 对 v-model 和 v-on 的 支持 ， 过 滤器 只 能 使 用 在 {{}} 标签 中 。 

@ 修改 了 过 滤器 参数 的 使 用 方式 ， 采 用 函数 的 形式 而 不 是 空格 来 标记 参数 。 例 如 : {{ 
date | date(yyyy-MM-dd) }}。 
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过 渡 系 统 是 Vue.js 为 DOM 动画 效果 提供 的 一 个 特性 ， 它 能 在 元 素 从 DOM 中 插入 或 移 


























除 时 触发 你 的 CSS 过渡 (transition ) 和 动画 (animation )， 也 就 是 说 在 DOM 元 素 发 生变 化 


支持 javascript 的 过 渡 ， 通 过 暴露 过 渡 系 统 的 钩子 函数 ， 我 们 可 以 在 DOM 变化 的 特定 时 机 对 

















时 为 其 添加 特定 的 class 类 名 ， 从 而 产生 过 渡 效 果 。 除 了 CSS 过 渡 外 ，Vue.js 的 过 渡 系 统 也 






















































































其 进行 属性 的 操作 ， 产 生动 画 效 果 。 





) 5.1 CSS 过 渡 





























小 节 首 先 来 了 解 下 CSS 过 渡 的 用 法 。 























5.1.1 CSS 过 渡 的 用 法 





























首先 举 一 个 例子 来 说 明 CSS 过 渡 系 统 的 使 用 方式 : 

















<div v-if="show" transition="my-startup"></div> 


var vm = new Vuelt 
el : '#app', 
data: { 


show : false 





RI 









































首先 在 模板 中 用 transition 绑 定 一 个 DOM 元 素 ， 并 且 使 用 v-if 指令 使 元 素 先 处 于 未 被 
遍 译 状态 。 然 后 在 控制 台 内 手动 调用 vm.show = true, 就 可 以 看 到 DOM 元 素 最 后 输出 为 : 
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5.1 CSS 过 渡 





<div class="my-startup-transition"></div> 




















我 们 可 以 看 到 在 DOM 元 素 完 成 编译 后 ， 过 渡 系 统 自 动 给 元 素 添加 了 一 个 my et 
transition 的 class 类 和 名。 那么 为 了 让 这 个 效果 更 明显 一 点 ， 还 可 以 提前 给 这 个 类 名 添加 一 点 


CSS 样式 : 





























.my-startup-transition { 
transition: all 1s ease; 
width: 100px; height: 100px; 
background: black; 

Opacity: 1 











新 刷新 并 手动 运行 vm.show = true， 发 现 最 终 样式 效果 是 加 载 上 去 了 ， 但 并 














































































































此 时 再 重 j 
没有 出 现 transition 的 效果 。 这 是 由 于 在 编译 v-if 后 ，div 直接 挂 载 到 body 并 添加 my 
startup-transition 类 名 这 两 个 过 程 中 浏览 器 仅 进 行 了 一 次 重 绘 ， 这 对 于 div 来 说 并 没有 产生 

































































属性 的 更 新 ， 所 以 没有 执行 css transition 的 效果 。 为 了 解决 这 个 问题 ，Vue.js 的 过 渡 系统 给 
元 素 插 入 及 移 除 时 分 别 添加 了 2 个 类 名 : *-enter 和 *-leave，* 即 为 transition 绑 定 的 字符 
串 ， 本 例 中 即 为 my-startup。 所 以 ， 在 上 述 例子 中 ， 我 们 还 需要 添加 两 个 类 名 样式 ， 即 my 


startup~enter, my—startup~leave: 













































































> 
































.my-startup-enter, .my-startup-leavelt 
height: Opx; 
opacity: O03 
} 
此 时 再 重复 之 前 的 操作 ， 就 可 以 看 到 过 渡 效 果 了 。 需 要 注意 的 是 ， 这 两 个 类 名 的 优先 级 
需要 高 于 .my-startup-transition， 不 然 被 my-startup-transition 覆盖 后 就 失效 了 。 
同样 ， 我 们 也 可 以 通过 CSS 的 animation 属性 来 实现 过 渡 的 效果 ， 例 如 : 































































































<StyLe> 
.my-animation-transition 





animation: increase 1s ease 0s 1; 
width: 100px:; 
height: 100px; 
background: black; 

} 

.my-animation-enter, .my-animation-leave { 
height: Opx; 

} 

Qkeyframes increase { 
from { height: Opx; } 
to { height: 100px; } 

} 

</style> 


异步 社区 会 员 123456(1429595365@qq.com) 专 享 尊重 版 权 


JU 


5 章 过 


沐 





Mi 


<div v-if="animation" transition="my-animation">animation</div> 


Var vm = new Vuel({ 
el : '#app', 
data: { 
animation : false 








同样 ， 更 改 vm.animation 为 true 后 即 可 看 到 过 渡 效 果 。 
从 了 直接 在 元 素 上 添加 transition="name" 外 ，Vue.js 也 支持 动态 绑 定 CSS 名 称 ， 可 
F 元 素 需 要 多 个 过 渡 效 果 的 场景 。 例 如 : 







































































中 








<div v-if="show" v-bind:transition=" transitionName"></div> 
// 也 可 以 简写 成 


<div v-if="show" :transition="transitionName"></div> 





Var vm = new Vuelt{ 
el: '#app', 
datas 并 
show: false, 
transitionName: 'fade' 
} 
}); 


Vue.js 本 身 并 不 提供 内 置 的 过 渡 CSS 样式 ， 仅 仅 是 提供 了 过 湾 需 要 使 用 的 样式 的 加 载 或 
移 除 时 机 ， 这 样 更 便于 我 们 灵活 地 按 需 去 设计 过 渡 样 式 。 

























































































5.1.2 ”CSS 过 渡 钩 子 函 数 


Vue.js 提供 了 在 插入 或 DOM 元 素 时 类 名 变化 的 钧 子 函 数 ， 可 以 通过 Vue.transition(Cname '， 
1 的 方式 来 执行 具体 的 函数 操作 。 例 如 : 





















































Vue.transition('my-startup', { 

beforeEnter: function (el) { 

console.log('beforeEnter', el.className); 
’ 
enter: function (el) { 

console.log('enter', el.className); 
’ 
afterEnter: function (el) { 
console.log('afterEnter', el.className); 





k 


enterCancelled: function (el) { 








console.log('enterCancelled', el.className); 
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5.1 _ CSS 过渡 


beforeLeave: function (el) { 


console.log('beforeLeave', el.className); 


leave: function (el) { 


console.log('leave', el.className); 


afterLeave: function (el) { 
console.log('afterLeave', el.className); 


了 


leaveCancelled: function (el) { 








console.log('leaveCancelled', el.className); 
































在 控制 台 里 执行 vm.show = true， 输 出 结果 如 下 : 








vm. show = true 

beforeEnter my-startup-transition 

enter my-startup-transition my-startup-enter 
true 


afterEnter my-startup-transition 








这 样 ， 我 们 能 很 清楚 地 看 到 钩子 函数 执行 的 顺序 以 及 元 素 类 名 的 变化 。 同 样 的 ， 还 可 以 
了 次 更 改 vm.show 的 值 置 为 false， 结 果 如 下 : 


医 
















































































> vm.show = false 
beforeLeave my-startup-transition 
leave my-startup-transition my-startup-Leave 
false 
afterLeave my-startup-transition 
> 


于 元 素 在 使 用 CSS 的 transition 和 animation 时 ， 系 统 的 流程 不 完全 一 样 。 所 以 先 以 
transition 为 例 ， 总 结 下 过 渡 系 统 的 流程 。 

vm.show = true 时 ， 
周 用 beforeEnter 函数 。 
添加 enter 类 名 到 元 素 上 。 
将 元 素 插入 DOM 中 。 
调用 enter 函数 。 
reflow 一 次 ， 然 后 移 除 enter 类 和 名， 触发 过 渡 效 果 。 
如 果 此 时 元 素 被 删除 ， 则 触发 enterCancelled 函数 。 

和 人 件 ， 过 渡 结 束 后 调用 afterEnter 函数 。 


















































IN 








< 

































































hal 














监听 transitionend 











vm.show = false 时 ， 
调用 beforeLeave 函数 。 











OEQOOOOO0N 
Ee 
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@) 添加 v-leave 类 名 ， 触发 过 渡 效 果 。 
@) 调用 leave 函数 。 
由 如 果 此 时 元 素 被 删除 ， 则 触发 leaaveCancelled 函数 。 


F transitionend 事件 ， 删 除 元 素 及 *-leave 类 和 名。 
人 @O) 调用 afterLeave 函数 。 


如 果 使 用 animation 作为 过 渡 的 话 ， 在 DOM 插入 时 , *-enter 类 名 不 会 立即 被 删除 ， 而 
是 在 animationend 事件 触发 式 删除 


~o 


leave 函数 都 有 第 二 个 可 选 的 
监听 transitionend 和 animationend 事件 ， 例 如 : 











































































































另外 ，enter 和 


荆 


















































调 参 数 ， 用 于 控制 过 渡 何 时 结束 ， 而 不 是 























<style> 
my-done-transition { 
transition: all 2s ease; 
width: 1l100px; height: 100px; 
hackground: black; 
Spacity 1 
} 
.my-done-enter, .my-done-leavel{ 
height: Opx; 
opacity: 0; 
} 
</style> 
Vue.transition('my-done', { 
enter: function (el, done) { 
this.enterTime = new Date(); 
setTimeout (done, 500) 7 
}, 
afterEnter: function (el) { 


console.log('afterEnter', new Date() - this.enterTime); 


}) 


Var vm = new Vuel({ 
el : '#app', 
data: { 

done : false 





vm.done = true 
true 


afterEnter 500 
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此 时 afterEnter 函数 执行 的 时 间 就 不 是 my-done-transition 样式 中 的 2s 之 后 ， 而 是 
done 调用 的 500ms 之 后 。 需 要 注意 的 是 ， 如 果 在 enter 和 leave 中 声明 了 形 参 done， 但 没 
J 调用 ， 则 不 会 触发 afterEnter 函数 。 








































































































5.1.3 ”显示 声明 过 渡 类 型 


Vue.js 可 以 指定 过 渡 元 素 监 听 的 结 台 型 , 例如 : 





























Vue.transition('done-type', {{ 
type: ‘animation' 

















此 时 Vue.js 就 只 监听 元 素 的 animationend 
的 结束 事件 触发 不 一 致 。 


hl 





有 人 件 ， 避 免 元 素 上 还 存在 transition 时 导致 





























5.1.4 ” 自 定义 过 渡 类 名 


除了 使 用 默认 的 类 名 *-enter, *-leave 外 ，Vue.js 也 允许 我 们 自 定 义 过 渡 类 和 名， 例如: 









































Vue.transition('my-startup', { 
enterClass: "fadeIn'， 
leaveClass: "fadeout' 

起 


























我 们 可 以 通过 上 述 钩子 函数 的 合子， 观测 元 素 的 类 名 变化 : 


> vm. show = true 
beforeEnter my-startup-transition 
enter my-startup-transition fadeIn 
true 
afterEnter my-startup-transition 

>》 vm.show = false 
beforeLeave my-startup-transition 
leave my-startup-transition fade0ut 
false 
afterLeave my-startup-transition 

> | 





















































Vue.js 官方 推荐 了 一 个 CSS 动画 库 ，animate.css， 配 合 自 定义 过 渡 类 名 使 用 ， 可 以 达 
到 非常 不 错 的 效果 。 只 需要 引入 一 个 CSS 文件，http://cdn.bootcss.com/animate.css/3.5.2/ 
animate.min.css， 就 可 以 使 用 里 面 的 预 设 动画 。 例 如 : 
































t 




















| 
ar 









































<div v-if="animateShow" class="animated" transition="bounce">bounce effect</ 
div> 
Vue.transition('bounce', 
enterClass: 'bouncelIn', 


leaveClass: 'bounceOut' 
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在 使 用 animate.css 时 ， 需 要 先 给 元 素 附 上 animated 类 名 ， 然 后 再 添加 预 设 的 动 效 类 名 ， 



































例如 上 例 中 的 bounceIn 、pounceOut， 这 样 就 能 看 





he) 
过 


动画 效果 。 这 个 库 提供 ] 




















种 强调 展示 


























(例如 弹性 、 拌 动 ) 、 渐 入 渐 出 、 翻 转 、 旋 转 、 放 大 
址 https://daneden.github.io/animate.cssy 在 线 观 看 。 


) 5.2 ” JavaScript 过 渡 


RNR 





















































宿 小 等 效果 。 所 有 的 效果 可 以 访问 官方 网 





Vue.js 也 可 以 和 一 些 JavaScript 动 画 库 配合 使 用 ， 这 里 只 需要 调用 JavaScript 钧 子 函 数 ， 


























而 不 需要 定义 CSS 样式 。transition 接受 选项 css:false, 将 直接 跳 过 CSS 检测 ， 








避免 CSS 规 



























































则 和 干扰 过 渡 ， 而 且 需 要 在 enter 和 leave 钩子 函数 中 调用 
处 将 引入 Velocity.js 来 配合 使 用 JavaScript 过 渡 。 








Do 
© 
马 





























5.2.1 Velocity.js 

















e 函数 ， 明 确 过 渡 结 束 时 间 。 此 























Velocity.js 是 一 款 高 效 的 动画 引擎 ， 可 以 单独 使 用 也 可 以 配合 jQuery 使 
jQuery 的 animate 一 样 的 api 接口， 但 比 jQuery 在 动画 处 理 方面 更 强大 、 更 流 
了 一 些 现 实 世 界 的 运动 ， 例 如 弹性 动画 等 。 

Velocity.js 可 以 当做 jQuery 的 插件 使 用 ， 例 如 : 




















































































































]。 它 拥有 和 
页 ， 以 及 模拟 





























$element.velocity({ left: "100px"}, 500, "swing"， function() {console. 


log ("done")}); 
$element.velocity({ left: "1l00px"}, { 
durationms: 500; 
easing: "swing", 
complete : function(){console.log("done");} 
}); 























也 可 以 单独 使 用 ， 例 如 : 








Var el = document .getElementBylId (id); 
Velocityl(el, { left : '100px' }, 500, 'swing', done); 








5.2.2 JavaScript 过 渡 使 用 


我 们 可 以 通过 以 下 方式 注册 一 个 自 定义 的 JavaScript 过 渡 : 









































<style> 

:mYy=vVelOCity=-tramsition { 
position: absolute; top:0Opx; 
width: 100px; height: 100px; 
background: black; 
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</style> 
<div v-if="velocity" transition="my-velocity"></div> 
Vue.transition('my-velocity', { 
css : false, 
enter: function (el, done) 
Velocity(el，({ left : '100px' }, 500, 'swing', done); 
’ 
enterCancelled: function (el) { 


Velocityl(el, 'stop'); 


leave: function (el, done) 
Velocity(el，({ left : 'Opx' }, 500, 'swing', done); 





leaveCancelled: function (el) { 








Velocity(el, vstop")? 





}) 





过 Velocity 对 DOM 操作 展现 动画 效果 ， 然 后 强 




















运行 上 述 代码 ,在 设置 vm.velocity = true 后 ， ee ] enter 钩子 函数 ， 通 
所 调用 done 函数 ， 明 确 结束 过 渡 效 果 。 
















































































一 | 





) 5.3 ”过 渡 系 统 在 Vue.js 2.0 中 的 变化 














过 渡 系 统 在 Vue.js 2.0 中 也 发 生 了 比较 大 的 变化 ,借鉴 了 ReactJS CSSTransitionGroup 























的 一 些 相关 设 定 和 命名 。 





5.3.1 用 法 变化 




































































新 的 过 渡 系 统 中 取消 了 v=-transition 这 个 指令 ， 新 增 了 名 为 transition 的 内 置 标签 ， 














<transition name="fade"> 
<div class="content™" v-if="show">content</div> 
</transition> 





过 渡 元 素 及 触发 过 渡 行 为 。v-if、v-show 等 指令 仍旧 标记 在 内 容 元 素 上 ， 并 不 会 作用 于 
transition 标签 上 。 




















ransition 标签 为 一 个 抽象 组 件 ， 并 不 会 额外 演 染 一 个 DOM 元 素 ， 仅 仅 是 用 于 包 





回 
浪 






































































































































ransition 标签 能 接受 的 参数 与 Vue.js 1.0 中 注册 的 transition 接受 的 选项 类 似 。 
1. name 

司 Vv 一 transition 中 接受 的 参数 ， 自 动 生 成 对 应 的 name-enter, name-enter-active 类 名 。 
2. appear 

元 素 首 次 浑 染 的 时 候 是 否 启用 transition， 默 认 值 为 false。 即 v=-if 绑 定 值 初始 为 true 时， 











































































































次 泻 染 时 是 否 调用 transition 效果 。 在 Vue.js 1.0 中 ，v-if 如 果 初 始 值 为 true 的话， 首次 
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Hr 


























泻 染 是 无 法 使 用 transition 效果 的 ， 只 有 v-show 能 使 用 。 
































同 Vue.js 1.0 的 CSS 选项， 如果 设 置 为 true， 则 只 监听 钩子 函数 的 调用 。 
4. type 

同 Vue.js 1.0 的 type 选项 ， 设 置 监听 CSS 动画 结束 事件 的 类 型 。 
5. mode 

控制 过 渡 插 入 / 移 除 的 先后 顺序 ， 主 要 用 于 元 素 切 换 时 。 可 供 选 择 的 值 丰 
“in-out”， 如 果 不 设 置 ， 则 同时 调用 。 例 如 : 




























































































“out—in”,， 




































































<transition name="fade" mode="out-in "> 
<p :key="ok">{{ok}}</p> // 这 里 的 :key='ok' 主要 用 于 强制 替换 元 素 ， 展 现 出 in- 
out/out-in 效果 
</transition> 











| 








ok 在 true 和 false 切换 时 ，mode=“out-in” 诀 定 先 移 除 <p>false</p>， 等 过 渡 结 

束 后 ， 再 插入 <p>true</p> 元 素 ，mode=“in-out” 则 相反 。 

6. 钩子 函数 

enterClass, leaveClass, enterActiveClass, leaveActiveClass, appearClass, 

appearActiveClass， 可 以 分 别 自 定 义 各 阶段 的 class 类 名 。 
总 得 来 说 ， 在 Vue.js 2.0 中 我 们 可 以 直接 使 用 transition 标签 并 设 定 其 属性 来 定义 一 个 


过 渡 效 果 ， 而 不 需要 像 在 Vue.js 1.0 中 通过 Vue.transition0 语句 来 定义 。 例 如 : 

















































































































人 
















































































支 七 于 号 这 三 二 七 二 加 这 
name="fade" 
mode="out-in"™ 
appear 
Q@before-enter="beforeEnter" 
Qenter="enter™" 
Qafter-enter="afterEnter" 


Qappear="appear™" 


@before-leave="beforeLeave" 
Qleave="leave" 
Qafter-leave="afterLeave" 
@leave-cancelled="leaveCancelled" 
> 
<div class="content" v-if="ok">{{ ok }}</div> 
</transition> 





5.3.2 ”类 名 变化 


从 上 述 属性 的 变化 中 我 们 可 以 看 出 ，Vue.js 2.0 中 新 增 了 两 个 类 名 enter-active 和 
leave-active， 用 于 分 离 元 素 本 身 样式 和 过 渡 样 式 。 我 们 可 以 把 过 渡 样 式 放 到 *-enter- 
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active、*-leave-active 中 ，*-enter，*-leave 中 则 定义 元 素 过 渡 前 的 样式 ， 而 元 泰 原 本 的 样 
式 则 由 自己 的 类 名 去 控制 ， 不 和 过 渡 系 统 自动 添加 的 类 名 样式 混合 起 来 。 举 个 例子 : 



























































只 














content { 
width: 100px; height: 100px; 
background: black; opacity: 1; 


.fade-enter, .fade-leave-activel{ 
opacity: 0; 


.fade-enter-active, .fade-leave-activel 
transition: all 3s ease; 





<transition name="fade"> 
<div class="content" v-if="ok"></div> 
</transition> 




















这 样 ，<transition fade="name"></transition> 就 可 以 当做 一 个 可 复 用 的 过 渡 元 素 ， 作 
到 你 期 望 的 元 素 上 。 
enter-active 添加 到 元 素 上 的 时 机 是 在 元 素 插 入 DOM 树 后 ,在 transition/animation 结束 
后 从 元 素 上 移 除 。leave-active 则 在 DOM 元 素 开 始 移 除 时 添加 上 ， 在 transition/animation 结 
后 移 除 。 
















































































| 





5.3.3 ”钩子 国 数 变化 


Vue.js 2.0 中 添加 了 三 个 新 的 钧 子 函 数 ，before-appear, appear 和 after-appear。 
appear 主要 是 用 于 元 素 的 首次 泻 染 ， 如 果 同 时 声明 了 enter 和 appear 的 相关 钩子 函数 ， 元 素 


首次 泻 染 的 时 候 会 使 用 appear 系 钧 子 函 数 ， 再 次 泻 染 的 时 候 才 使 用 enter 系 钧 子 函 数 。 例 如 : 































































































Hr 















































<tranmsition 
name="fade" mode="in-out" appear 
@before-enter="beforeEnter" 
Qenter="enter" 


Qafter-enter="afterEnter" 
Qappear="appear™" 
Qbefore-leave="beforeLeave" 


Qleave="]leave" 
Qafter-leave="afterLeave" 


这 

<div class="content" v-if="ok">{{ ok }}</div> 
</ transitidnS 
Var vm = new Vue ({ 


el : '#app', 
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data : { 
ok : true 

} 
methods : { 

beforeEnter : function(el) { 
console.log('beforeEnter', el.className); 
’ 
enter : function(el) { 
console.log('enter', el.className); 


了 


afterEnter : function(el) { 








console.log('afterEnter', el.className); 
’ 
appear : function(el) { 
console.log('appear', el.className); 
’ 
beforeLeave : function(el) { 


console.log('beforeLeave', el.className); 


leave : function(el) { 


console.log('leave', el.className); 


afterLeave : function(el) { 








console.log('afterLeave', el.className); 








beforeEnter content 
appear content fade-enter fade-enter-active 
afterEnter content 
> vm.ok = false 
beforeLeave content 
leave content fade-leave fade-leave-active 
false 
afterLeave content 
> vm.ok = true 
beforeEnter content 
enter content fade-enter fade-enter-active 
true 
afterEnter content 
> | 









































另外 ， 取 消 了 v-if 时 的 leave-cancelled， 元 素 一 旦 被 移 除 则 不 能 停止 该 操作 。 但 使 用 
v-show 时 ，leave-cancelled 钩子 仍然 有 效 。 我 们 可 以 沿用 上 面 这 个 例子 ， 在 transition .| 
加 一 个 钧 子 函 数 @leave-cancelled="leaveCancelled"， 将 元 素 设 置 成 <div class="content" 








Tt 
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V-if="ok">{fok }}</div>，<div class="content" v-show="ok">{{ ok }}</div> 两 种 情况 





























然后 手动 设置 vm.ok = false, 并 在 元 素 仍 在 过 渡 中 设置 vm.ok = true。 在 v-f 情况 下 ， 元 素 
继续 进行 leave transition， 在 transition 结束 后 再 次 进行 enter 过 渡 ; 而 在 v-show 情况 下 ， 
元 素 则 直接 停止 了 leave transition， 并 调用 了 leaveCancelled 钩子 函数 ， 然 后 直接 进行 了 


enter 过 渡 。 
































































































































5.3.4 transition-group 























余 了 内 置 的 transition 标签 外 ，Vue.js 2.0 提供 了 transition-group 标签 ， 方 便 作 用 到 
多 个 DOM 元 素 上 。 例 如: 





























<transition-group tag="ul" name="]list"> 
<1i v-for="item in items" :key="item.id"> 
{{ item.text }} 
Li 


</transition-group> 









































nn 











transition-group 的 主要 作用 是 给 其 子 元 素 设 定 一 个 统一 的 过 小 样式 ， 而 不 需要 给 每 
个 元 素 都 用 transition 包 应 起 来 。 

和 transition 标签 不 一 样 ，transition-group 不 是 一 个 虚拟 DOM， 会 真实 演 染 在 DOM 
树 中 。 默 认 会 是 span 标签 ， 但 我 们 也 可 以 通过 属性 tag 来 设 定 ， 如 上 例 中 transition-group 
最 终 输 出 的 会 是 一 个 ul 标签。 另外， 我 们 也 可 以 通过 <ul is='"transition-group"> 这 样 的 写 
法 来 设 定 标签 


Ao 
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ransition-group 接收 的 参数 和 transition 基本 一 致 ， 但 不 支持 mode 参数 ， 而 且 每 个 


transition-group 的 子 元 素 都 需要 包含 唯一 的 key， 如 上 例 中 的 key=item.id。 
我 们 可 以 补 全 上 面 的 代码 ， 作 为 一 个 完整 的 transition-group 例子 : 


<style> 
二 
width: 1l100px; height: 20px; 
transform: translate(0, 0); 

















et 














































































































.list-enter, .list-leave-activef 


opacity;: O07 transtorm: translate (=30p¥x, 0)} 


.list-enter-active, .list-leave-activetf 
transition: all 0.5s ease; 





</style> 
<transition-group tag="ul" name="]list" appear> 
<li v-for="item in items" :key="item.id" class="]list-l1li"> 
{{ item.text }} 
</1i> 
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5 章 ”过渡 





</transition-group> 


Var vm = new Vuelt{ 
el : '#app', 
data : { 
items ; [ 
4 证 
下 
下 
{ id : 4, text : "44' } 























我 们 可 以 在 控制 台 旦 











有 对 vm.items 进行 push 或 splice 操作 ， 这 样 就 能 看 到 1i 标签 的 过 渡 


























效果 了 。 
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代码 复 用 一 直 是 软件 开发 中 长 期 存在 的 一 个 问题 ， 每 个 开发 者 都 想 再 次 使 用 之 前 写 好 的 
代码 ， 又 担心 引入 这 段 代 码 后 对 现 有 的 程序 产生 影响 。 从 jQuery 开始 ， 我 们 就 开始 通过 插件 
的 形式 复 用 代码 ， 到 Requirejs 开始 将 js 文件 模块 化 ， 按 需 加 载 。 这 两 种 方式 都 提供 了 比较 
方便 的 复 用 方式 ， 但 往往 还 需要 自己 手动 加 入 所 需 的 CSS 文件 和 HTML 模块 。 现 在 ，Web 
Components 的 出 现 提 供 了 一 种 新 的 思路 ， 可 以 自 定 义 tag 标签 ， 并 拥有 自身 的 模板 、 样 式 和 
交互 。Angularjs 的 指令 ，Reactjs 的 组 件 化 都 在 往 这 方面 做 尝试 。 同 样 ，Vue.js 也 提供 了 自 
己 的 组 件 系 统 ， 支 持 自 定义 tag 和 原生 HTML 元 素 的 扩展 。 


) 6.1 组 件 注册 


Vue.js 创建 组 件 构 造 器 的 方式 非常 简单 ， 在 本 书 第 2.5 章 的 时 候 也 提 到 过 





























































































































































































































































































































































































































Var MyComponent = Vue.extend({ … }); 


这 样 ， 我 们 就 获得 了 一 个 组 件 构造 器 ， 但 现在 还 无 法 直接 使 用 这 个 组 件 ， 需 要 将 组 件 注 
册 到 应 用 中 。Vue.js 提供 了 两 种 注册 方式 ， 分 别 是 全 局 注册 和 局 部 注册 。 









































































































































6.1.1 全 局 注册 


全 局 注册 需要 确保 在 根 实 例 初 始 化 之 前 注册 ， 这 样 才 能 使 组 件 在 任意 实例 中 被 使 用 ， 注 
册 方 式 如 下 : 
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Vue .component ( 'my-component '， MyComponent); 




















这 条 语句 需要 写 在 var vm = new Vue({…}) 之 前 ， 注 册 成 功 之 后 ， 就 可 以 在 模块 中 以 自 
定义 元 素 <my-component> 的 形式 使 用 组 件 。 对 于 组 件 的 命名 ，W3C 规范 是 字母 小 写 
含 一 个 短 横 杠 “-”，Vue.js 暂 不 强制 要 求 ， 但 官方 建议 遵循 这 个 规则 比较 好 。 

整个 使 用 方法 代码 如 下 : 












































a 




























































































<div id="app"> 
<my-component></my-component> 
</div> 


Var MyComponent = Vue.extendl({ 
template : '<p>This is a component</p>' 
}) 


Vue .component ('my-component', MyComponent) 


Var vm = new Vuelt 
el : '#app' 
}); 


输出 结果 如 下 : 














<div id="app"> 
<p>This is a component</p> 
he bi 





6.1.2 局 部 注册 


局 部 注册 则 限定 了 组 件 只 能 在 被 注册 的 组 从 9， 注 册 方式 如 下 : 
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Var Child = Vue.extendl(t{ 








template : '<p>This is a child component</p>' 
}); 


Var Parent = Vue.extendl({ 
template: '<div> \ 
<p>This is a parent component</p> \ 
<my-child></my-child> \ 
bghe lh pa 
components: { 
'my=Child's Child 








输出 结果 即 为 : 
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<div> 
<p>This is a parent component</p> 
<p>This is a child component</p> 
</div> 


























而 如 果 在 根 实例 中 调用 <my-child></my-child>， 则 会 抛 出 异常 [Vue warn]: Unknown 


custom element: <my—child> — did you register the component es For recursive 











components, make sure to provide the "name" option. 


6.1.3 注册 语法 糖 
Vueijs 对 于 上 述 两 种 注册 方式 也 提供 了 简化 的 方法 ， 我 们 可 以 直 楼 在 注册 的 时 候 定义 组 
件 构造 器 选项 ， 例 如 ， 
// 全 局 注册 


Vue .component ('my-component', { 





















































template : '<p>This is a component</P>'! 
}) 
// 局 部 注册 
Var Parent = Vue.extend ({ 
template: '<div> \ 
<p>This is a parent component</p> \ 
<my-child></my-child> \ 
去 /QZ> 7 
components: { 
'my-child': { 
template : '<p>This is a child component</p>' 


); 





) 6.2 ”组 件 选项 


组 件 接受 的 选项 大 部 分 与 Vue 实例 一 样 ， 相 同 的 部 分 本 章 就 不 袭 述 了 ， 主 要 说 明 一 下 两 
漳 的 区 别 和 组 件 选 项 中 的 props， 用 于 接受 父 组 件 传 递 的 参数 。 













































































6.2.1 组 件 选项 中 与 Vue 选 项 的 区 别 


组 件 选 项 中 的 el 和 data 与 Vue 构造 器 选项 中 这 两 个 属性 的 赋值 会 稍微 有 些 不 同 。 在 
Vue 构造 器 中 是 直接 赋 人 

















































































































var vm = new Vue (1{ 
el : '#app', 
data 下 
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name : 'Vue' 


























而 在 组 件 中 需要 这 么 定义 : 








Var MyComponent = Vue.extendl({ 




































































data : function() { 
return { 
name : 'component' 
} 
} 
}) 
这 是 因为 MyComponent 可 能 会 拥有 多 个 实例 ， 例 如 在 某 个 组 件 模 板 中 多 次 使 用 <my 




































































component></my-component>。 如 果 将 对 象 data 直接 传递 给 了 Vue.extend({})， 那 所 有 
MyComponent 的 实例 会 共享 一 个 data 对 象 ， 所 以 需要 通过 函数 来 返回 一 个 新 对 象 。 同 样 ， 
el 也 是 这 么 处理 ， 只 不 过 在 组 件 中 通过 el 来 直接 设 定 挂 载 元 素 的 情况 比较 少见 ， 自 然 避免 了 
这 种 情况 。 















































































































































6.2.2 组 件 Props 


选项 props 是 组 件 中 非常 重要 的 一 个 选项 ， 起 到 了 父子 组 件 间 桥梁 的 作用 。 
首先 ， 需 要 明确 的 是 ， 组 件 实例 的 作用 域 是 孤立 的 ， 也 就 是 说 子 组 件 的 模板 和 模块 中 是 
无 法 直接 调用 父 组 件 的 数据 ， 所 以 通过 props 将 父 组 件 的 数据 传递 给 子 组 件 ， 子 组 件 在 接受 数 
据 时 需要 显 式 声明 props， 例 如 : 





































































































































































































Vue .component ('my-child', { 
props. + ["parenmnt"l]; 
template: '<p>{{ parent }} is from parent'"' 

}) 

<my-child parent="This data"></my-child> //-> <p>This data is from 

parent </p> 
































这 就 是 props 的 基本 使 用 方法 ， 另 外 还 有 几 点 细节 会 进行 详细 说 明 。 
1 驼峰 命名 

同 指令 等 情况 相同 ， 由 于 HTML 属性 不 区 分 大 小 写 ， 如 果 我 们 在 <my-child> 中 的 
属性 使 用 驼峰 式 myParam 命名 ， 即 <my=-child myParam="…'>， 那 在 props 中 的 命名 即 
为 props: [myparam']。 所 以 如 果 需 要 使 用 驼峰 式 命 名 的 话 ， 我 们 需要 在 标签 中 使 用 my 
param， 用 “-” 的 方式 隔 开 ， 这 样 在 props 中 就 可 以 使 用 props: [myParam'] 的 形式 进行 
声明 。 
2. 动态 Props 

除了 上 述 例子 中 传递 静态 数据 的 方式 外 ， 我 们 也 可 以 通过 v-bind 的 方式 将 父 组 件 的 


























































































































































































































































































































上 
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data 数据 传递 给 子 组 件 ， 例 如 : 





<div id="app"> 

<input type="text" v-model="message" /> 

<my-component v-bind:message="message"></my-component> 
</div> 
Var MyComponent = Vue.extendl({ 

props : ['message'], 

template : "<p>{{ 'From parent : ' + message }}</p>" 


}) 


Vue .component ('my-component', MyComponent); 


Var vm = new Vuel({ 
el : '#app', 
data 4 
message : "qdqefault' 


} 

}); 

这 样 我 们 在 更 改 根 实例 message 的 值 的 时 候 ， 组 件 中 的 值 也 随 之 改动 。 除 了 v-bind 外 ， 

也 可 以 直接 简写 成 <my-component :message='"message'"></my-component>。 
需要 注意 的 是 如 果 直 接 传递 一 个 数值 给 子 组 件 ， 就 必须 借助 动态 Props。 如 果 通 过 
<my-component :message="1"></my-component> 这 种 方式 传递 的 话 ， 则 在 子 组 件 
的 message 其 实 是 字符 串 “1”， 只 有 通过 如 下 的 方式 ， 才 能 准确 传递 数值 : 
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<my-num :num="num"></my-num> 
Vue .component ('my-num', { 

PEGpPS. 3 "Hum; 

template : "<p>{{ num + ' is a ' + typeof num }}</p>", 
}); 
Var vm = new Vue (1{ 

el : '#app', 

data + 1 

Um 1 


}); 
// 输出 <p>1 is a number</p> 





3. 绑 定 类 型 

在 动态 绑 定 中 ， ind 指令 也 提供 了 几 种 修饰 符 来 进行 不 同方 式 的 绑 定 。Props 绑 定 默 
认 是 单身 绑 定 ， 即 当 父 组 件 的 数据 发 生变 化 时 ， 子 组 件 的 数据 随 之 变化 ， 但 在 子 组 件 中 修改 数 
据 并 不 影响 父 组 件 。 修 饰 符 .sync 和 .once 显示 的 声明 绑 定 为 双向 或 单 次 绑 定 ， 例 如 : 
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tt 
UD 
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> 











<div id="app"> 





<div> 
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Parent component: <input type="text" v-model="msg" /> 


i 


<my-bind :msg="msg"></my-bind> 


/OL 

Vue .component ('my-bind', { 
Brops : [msg ”ls 
template : '<div> \ 


Child component : \ 


<input type="text" v-model="msg"/> \ 


</di 
站 让 过 


本 


守 守 1 


new Vue ({ 


el : '#app', 


data : 


msg : 


{ 








代码 结果 如 下 : 


Parent component: 123 
Child component : 1232323 























此 时 父子 组 件 中 的 即 是 单 向 乡 定 ， 可 以 通过 input 修改 子 组 件 中 的 值 并 不 影响 父 组 件 





的 值 。 
而 如 果 将 























上 
































NS 





























上 述 例子 中 <my-bind :msg="msg"></my-bind> 替换 成 < 
sync="msg"></my-bind>， 则 在 子 组 件 的 input 中 修改 值 即 会 影响 父 组 件 的 值 。 



































Parent component: 1232323 


Child component :J1232323| | 















































































































































































































































































































































my—bind :mseg. 








once 修 饰 符 意 味 着 单 次 绑 定 ， 子 组 件 接受 一 次 父 组 件 传 递 的 数据 后 ， 单 独 维护 这 份 数据 ， 
既 不 影响 父 组 件数 据 也 不 受 其 影响 而 更 新 。 

需要 注意 的 是 ， 由 于 Vue.js 处 理 的 方式 是 引用 传递 ， 所 以 如 果 prop 传递 的 是 一 个 对 象 
或 数组 ， 那 在 子 组 件 内 进行 修改 就 会 影响 父 组 件 的 状态 ， 即 使 是 单 回 绑 定 也 一 样 。 
4. Props 验 证 

组 件 可 以 指定 props 验证 要 求 ， 这 对 开发 第 三 方 组 件 来 说 ， 可 以 让 使 用 者 更 加 谁 确 地 使 
组 件 。 使 用 验证 的 时 候 ，props 接受 的 参数 为 json 对 象 ， 而 不 是 上 述 例子 中 的 数组 ， 例 如 : 
props : { a : Number }， 即 为 验证 参数 a 需 为 Number 类 型 ， 如 果 调 用 该 组 件 传 入 的 a 参数 
为 字符 串 ， 则 会 抛 出 异常 。Vue.js 提供 的 Props 验证 方式 有 很 多 种 ， 下 面 逐一 进行 说 明 
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6.3 组 件 间 通 信 




















1) 基础 类 型 检测 : prop: Number， 接 受 的 参数 为 原生 构造 器 ，String、Number、 
















































































Boolean、Function、Opbject、Array。 也 可 接受 null， a 

2 ) 多 种 类 型 : prop:[Number，String]， 人 允许 参数 为 多 种 类 型 之 一 ， 例 如 类 型 可 以 为 数值 
或 字符 串 。 

3 ) 参数 必需 : prop: { type : Number，required: true}， 人 参数 必须 有 值 且 为 Number 
类 型 。 












































4 ) 参数 默认 : prop: { type : Number，default : 10 }， 参 数 具 有 默认 值 10。 需 要 注意 
的 是 ， 如 果 默 认 值 设 置 为 数组 或 对 象 ， 需 要 像 组 件 中 data 属性 那样 ， 通 过 函数 返回 值 的 形式 
赋值 ， 如 : 






































































































































Brop © 4 
type : Object, 
default : function() { 
rat Urn. a} 


} 

5 ) 绑 定 类 型 : prop: { twoWay : true}， 校 验 绑 定 类 型 ， 如 果 非 双向 绑 定 会 抛 出 一 条 警告 。 

6 ) 自 定义 验证 函数 : prop : { validator : function(value) { return value > 0; } }, 验 
证 值 必 须 大 于 0。 

7 ) 转换 值 : prop: { coerce : function(val) { return parselInt(val) }}， 将 字符 















































串 转 化 成 







































































在 开发 环境 中 ， 如 果 验 证 失败 了 ，Vue 将 抛 出 一 条 警告 ,组件 上 也 无 法 设置 此 值 。 

在 Vue.js 2.0 中 ,验证 属性 twoWay 和 coerce 均 被 废弃 。 由 于 组 件 间 只 支持 单 向 绑 定 ， 
所 有 twoWay 的 校 验 也 就 不 存在 了 。 而 coerce 的 用 法 和 计算 属性 过 于 类 似 ， 所 以 也 被 废弃 ， 
官方 推荐 使 用 计算 属性 代替 。 


) 6.3 ”组 件 间 通信 


组 件 间 通信 是 组 件 开 发 时 非常 重要 的 一 环 ， 我 们 既 希 望 组 件 的 独立 性 ， 数 据 能 互 不 干涉 ， 
又 不 可 避免 组 Vue.js 在 组 件 间 通 信 这 一 部 分 既 提 供 了 直接 访问 组 件 实例 
的 方法 ， 也 提供 了 自 定 义 事件 机 制 ， 通 过 广播 、 派 发 、 监 听 等 形式 进行 跨 组 件 的 函数 调用 。 
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6.3.1 直接 访问 


在 组 件 实例 中 ，Vue.js 提供 了 以 下 三 个 属性 对 其 父子 组 件 及 根 实例 进行 直接 访问 。 

1 ) $parent: 父 组 件 实例 。 
2 ) $children: 包含 所 有 子 组 件 实例 。 
3 ) $root: 组 件 所 在 的 根 实例 。 
这 三 个 属性 都 挂 载 在 组 件 的 this 上 ， 虽 然 Vue.js 提供 了 直接 访问 这 种 方式 ， 但 我 们 并 不 
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提 侦 这 么 操作 。 这 会 导致 父 组 件 和 子 组 件 紧 密 耦 合 ， 且 自身 状态 难以 理解 ， 所 以 建议 尽量 使 用 
props 在 组 件 间 传递 数据 。 






















































































6.3.2 ” 自 定义 事件 监听 

































































在 Vue 实例 中 ， 系 统 提供 了 一 套 自 定义 事件 接口 ， 用 于 组 件 间 通信 ， 方 便 修改 组 件 状态 。 
类 似 于 在 jQuery， 我 们 给 DOM 元 素 绑 定 一 个 非 原 生 的 事件 ， 例 如 : $(#ele).on(custom ， 
fn) ， 然 后 通过 手动 调用 $(#ele).trigger(custom ) 方式 来 进行 事件 的 触发 。 
那 在 Vue.js 中 ， 我 们 先 来 看 下 如 何在 实例 中 监听 自 定义 事件 。 
1. events 选 项 
我 们 可 以 在 初始 化 实例 或 注册 子 组 件 的 时 候 ， 直 接 传 给 选项 events 一 个 对 象 ， 例 如 : 
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Var vm = new Vuel({ 
el : '#app', 
data 3 4 

tode. 3 [dy 


}, 
events : { 
“add" 3 function (msg) 1 
this.todo.push (msg); 
} 
} 
}); 


2.，$on 方 法 
我 们 也 可 以 在 某 些 特定 情况 或 方法 内 采用 $on 方法 来 监听 事件 ， 例 如: 



























































Var vm = new Vue 人 
el : '#app', 


methods : { 
begin : function() { 
this.$on('add', function(msg) f{ 
this.todo.push (msg); 



























































设置 完成 事件 监听 后 ， 下 面 来 看 下 Vue.js 的 触发 机 制 。 
1. $emit 














在 实例 本 身上 触发 事件 。 例 如 : 
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6.3 组 件 间 通 信 
events : { 
"adad’ 





function (msg) 


{ 
this.todo.push (msg); 


} 
methods: { 
OnCLLGkK. 汉 


function () 


{ 
this.$emit('add', 


'there is a message');// 即 可 触发 events 中 的 add 函数 
} 


2. $dispatch 
派发 事件 ， 











hl 









































































































































































































































件 沿 着 父 链 冒 泡 ， 并 且 在 第 一 次 触发 回调 之 后 自动 停止 冒 泡 ， 除 非 触 发 函 
数 明确 返回 true， 才 会 继续 向 上 冒 泡 。 
父 组 件 : 
events : 1 
'add' function(msg) { 
this.todo.push (msg); 
// return true 明确 返回 true 后 ， 事件 会 继续 向 上 冒 泡 
} 
} 
子 组 件 : 
methods: { 
toParent funetioGn() 4 
this.$dispatch('add', 'message from child'); 
} 
调用 子 组 件 中 的 toParent() 函数 ， 即 可 向 上 冒 泡 ， 触 发 父 组 件 中 定义 好 的 add 事件 。 
. $broadcast 
广播 事件 ， 事 件 会 向 下 传递 给 所 有 的 后 代 。 例 如 
父 组 件 : 





methods: { 
tC 





functionmn()y 1{ 
this.s$dispatch('msg', 


'message from parent'); 


} 


子 组 件 : 


Tt 








events : 1 


'msg' 





function (msg) 


{ 
alert (msg); 
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下 面 ， 我 们 可 以 通过 这 个 完整 的 例子 来 验证 这 三 种 触发 机 











Dt 
人 


























// 模板 
<div id="app"> 
<input type="text" v-model="content"> 
<button click="addTodo"> 添加 </button> 
<button click="broadcast"> 广播 </button> 
<child-todo name="one"></child-todo> 
<child-todo name="two"></child-todo> 
<ul> 
<li v-for="value in todo"> 
{{ value }} 
< 
</Ul> 
</div> 
// 子 组 件 
Vue .component ('child-todo', { 
props : ['name'], 
data : function() { 
return 1{ 


content ; '"' 


}, 
template : '<div>\ 
Child {{name}} \ 
<input type="text" v-model="content"/> \ 
<button Q@click="add"> 添 加 </button> \ 
/LV 
methods : { 
adqd : function() { 
// 将 事件 向 上 派发 ,这样 既 修 改 了 父 组 件 中 的 todo 属性 ， 又 不 直接 访问 父 组 件 
this. Sdispatceh( add'y "Child + 4 this nanme 二 + this. CO 七 人 七) 
this.content = "07 


}, 
events : { 
// 用 于 接收 父 组 件 的 广播 
《二 加 = 区 本 于 二 可“ {Untion(msg) 元 
this.$dispatch('add', 'Child ' + this.name + ': ' + msg); 
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// 根 实例 
Var vm = new Vue (1{ 
el : '#app', 
data : { 
tods 3 Llls 
content : "'' 
}, 
methods : { 
addTodo : function() { 
// 触发 自己 实例 中 的 事件 
this.$emit('add', '‘'Parent: ' + this.content) ， 
this.content = ''); 
}, 
broadeast » functiowm{y 1 
// 将 事件 广播 ， 使 两 个 子 组 件 实例 都 触发 to-child 事件 
thiiis, Sbhroadcast (to=chnild, this. content); 
this.content = (7 
} 
}, 
events : { 
"add" : function(msg) 1 
this,. todo. push (msg 

















页 面 结 果 将 展示 为 : 














添加 | 广播 
Child one 添加 
Child two 添加 





在 根 实例 的 input 中 输入 内 容 “Hello”， 点 击 “ 添 加 ”, 即 会 在 绑 定 v-for 指令 的 1 标签 
1 输出 “Parent : Hello”; 或 点 击 “ 广 播 ”"， 则 会 输出 “Child one: hello” 和 “Child two: 
hello” 两 条 数据 ， 本 质 就 是 广播 了 事件 to-child， 两 个 子 组 件 接 受 后 触发 了 监听 函数 ， 将 内 
容 和 组 件 name 参数 添加 到 父 组 件 的 todo 数组 中 。 


P34 






















































































6.3.4 子 组 件 索引 


虽然 我 们 不 建议 组 件 间 直 接 访问 各 自 的 实例 ， 但 有 时 也 不 可 避免 ，Vue.js 也 提供 了 直接 
访问 子 组 件 的 方式 。 除 了 之 前 的 this.children 外 ， 还 可 以 给 子 组 件 绑 定 一 个 v-ref 指令 ， 指 
定 一 个 索引 ID， 例如: 


<child-todo v-ref:first></child-todo> 














































































































这 样 ， 在 父 组 件 中 就 可 以 通过 this.$refs.first 的 方式 获取 子 组 件 实例 。 
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另外 ， 如 果 v-ref 作用 在 v-for 绑 定 的 元 素 上 ， 例 如 : <li v-for="item" v-ref:items> 
</li>， 父 组 件 获取 的 this.$refs.items 为 一 个 数组 ， 包 含 相 应 的 子 组 件 实例 。 


) 6.4 ”内 容 分 发 
在 实际 的 一 些 情况 中 ， 了 组 件 往往 并 不 知道 需要 展示 的 内 容 ， 而 只 提供 基础 的 交互 功能 ， 内 容 
及 事件 由 父 组 件 来 提供 。 例 如 我 们 经 常会 使 用 的 Bootstrap 的 模 态 框 ( Modal ) 插件， 如 图 6-1 所 示 。 
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Modal title 


One fine body... 





图 6- 





















































我 们 在 调用 时 只 希望 使 用 Modal 的 浮 层 属 性 ， 以 及 显示 / 关闭 浮 层 等 控制 函数 ， 但 内 容 
本 身 则 由 父 组 件 来 决定 。 对 此 Vue.ijs 提供 了 一 种 混合 父 组 件 内 容 与 子 组 件 自己 模板 的 方式 ， 
这 种 方式 称 之 为 内 容 分 发 。Vue.js 参照 了 当前 web component 规范 草稿 ， 使 用 <slot> 元 素 
为 原始 内 容 的 插 柳 。 首 先 解释 下 内 容 分 发 的 一 些 基础 用 法 和 概念 ， 最 后 来 说 明 下 Modal 这 个 
实际 案例 。 


6.4.1 基础 用 法 


先 举 一 个 简单 的 例子 来 说 明 内 容 分 发 的 基础 用 法 : 









































































































































































































































<div id="app"> 
// 使 用 包含 slot 标签 属性 的 子 组 件 
<my-slot> 
// 属性 slot 值 需要 与 子 组 件 中 slot 的 name 值 匹配 
<p slot="title">{{ title }}</p> 
<div slot="content">{{ content }}</div> 











</my-slot> 
</div> 
// 注册 my-slot 组 件 ， 包含 <slot> 标签 ， 且 设 定 唯一 标识 name 
Vue .component ('my-slot', { 
template : '<div>\ 
<div class="title"> \ 
<slot name="title"></slot> \ 
</div> \ 
<div class="content"> \ 
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<slot name="content"></slot> \ 
</div> \ 
/LY: 
}); 
Var vm = new Vuelt 
el : '#app', 
data : { 
七 主 七 二 "Le 
content : 'This is the content' 
} 
}); 
// 最 后 输出 结果 
<div> 
<div class="title"> 
<p slot="title">This is a title</p> 
</div> 
<div class="content"> 
<div slot="content">This is the content</div> 
</div> 
</div> 


从 上 述 例子 中 可 以 看 出 ， 父 组 件 中 的 内 容 代替 了 子 组 从 
不 同 地 方 使 用 子 组 件 的 结构 而 且 填 充 不 同 的 父 组 件 内 容 ， 从 而 提升 组 件 的 复 用 性 。 
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6.4.2 编译 作用 域 


在 上 述 例子 中 ， 我 们 在 父 组 件 中 调用 <my-slot> 组 件 ， 并 在 <p slot= “title”>{{ title 
}}</p> 中 绑 定 数据 title， 从 结果 得 知 此 时 绑 定 的 是 父 组件 的 数据 。 也 就 是 说 在 这 种 <my- 
slot>{{ data }</my-slot> 模板 情况 下 ， 父 组 件 模板 的 内 容 在 父 组 件 作 用 域内 编译 ; 子 组 件 
模板 的 内 容 在 子 组 ] 域 内 编译 。 

以 下 这 样 的 父 组 件 模板 例子 就 是 无 效 的 : 
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<my-scope-slot> 

<p slot="title">{{ childData }}</p> 
</my-scope-slot> 
Vue .component ('my-scope-slot', { 


template : '<div>\ 
<p>{{ "child: ™+ childData }}</p> \ 
<slot name="title"></slot> \ 
</dLv 
datal() { 
return { 
childData : 'child scope' 
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<div> 
<p>child: child scope</p> 
<p slot="title"></p> 
</div> 





6.4.3 默认 slot 


<slot> 标签 允许 有 一 个 匿名 slot， 不 需要 有 name 值 ， 作 为 找 不 到 匹配 的 内 容 片段 的 
播 槽 ， 如 果 没 有 默认 的 slot， 这 些 找 不 到 匹配 的 内 容 片段 将 被 忽略 。 下 面 修改 一 下 上 面 的 例子 : 
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<anonymous-slot> 
// 去 除 slot 属性 
<div id="content">{{ content }}</div> 
<p slot="title">{{ title }}</p> 





</anonymous-slot> 
// 匿名 slot 
Vue .component ('anonymous-slot', { 
template : '<div>\ 
<div class="title"™> \ 
<slot name="title"></slot> \ 
/> 
<div class="content"> \ 
<slot></slot> \ 
</div> \ 
/OLYST, 
}); 


此 时 id 为 content 的 元 素 即 为 找 不 到 匹配 的 内 容 片 段 ， 由 于 我 们 在 anonymous-slot 组 
件 中 设置 了 匿名 slot， 所 以 Vue.js 会 把 该 元 素 插入 到 slot 中 ， 最 后 输出 结果 : 
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<div> 
<div class="title"> 
<p slot="title">This is a title</p> 
</div> 
<div class="content"> 
<div>This is the content</div> 
</div> 
</div> 

















如 果 将 子 组 件 中 的 匿名 <slot></slot> 替换 成 <slot name="content"></slot>， 则 
#content 元 素 就 直接 被 忽略 了 ， 输 出 结果 为 : 



































<div> 


<div class="title"> 
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<p slot="title">This is a title</p> 
</div> 
<div class="content"> 
</div> 
</div> 





6.4.4 slot 属性 相同 














在 父 组 件 中 ,我 们 也 可 以 定义 多 个 相同 slot 属性 的 DOM 标签 ， 这 样 会 依次 插入 到 对 应 的 


Ee 

















点 的 方式 呈现 ， 我 们 可 以 将 上 例 中 父 组 件 的 实例 模板 改 成 : 



































子 组 件 的 Slot 标签 中 ， 以 兄弟 





<my-slot> 
<p slot=s"title">{{ title + "1'}}</p> 





<p slot="title">{{ title + 2}}</p> 
<div slot="content">{{ content }}</div> 
</my-slot> 
// 输出 结果 
<div> 
<div class="title"> 
<p slot="title">This is a titlel</p> 
<p slot="title">This is a title2</p> 
</div> 
<div class="content"> 
<div slot="content">This is the content</div> 
</div> 
</div> 





6.4.5 ”Modal 实 例 








ar 
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本 小 节 我 们 会 通过 Modal 案例 来 演示 内 容 分 发 的 实际 使 用 场景 。 
首先 注册 Modal 子 组 件 : 


// Modal 组 件 模板 
<script id="modalTpl" type="x-template"> 




































































<div role="dialog"> 


<div role="document"™" v-bind:style="{width: optionalWidth}"> 


<div class="modal-content"> 





<slot name="modal-header"> 
<div class="modal-header"> 
<button type="button" class="close" @click="close"> 


<span>&times;</span></button> 
<h4 class="modal-title" > 


<slot name="title"> 
{{title}} 
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</slot> 
</h4> 

</div> 
</slot> 
<slot name="modal-body"> 

<div class="modal-body"></div> 
</slot> 
<slot name="modal-footer"> 

<div class="modal-footer"> 


<button type="button" class="btn btn-default" Qclick="close"> 


取消 </button> 


<bUutton tyBe= "putton" clagssse"btn Dtm=primary" 


click="callback"> 确定 </button> 
</div> 
</slot> 
</div> 
</div> 
</div> 
</script> 
// 注册 Modal 组 件 


Vue.component('modal', { 
template : '#modalTpl',， // 获取 模板 中 的 HTML 结构 
下 和 有 a 
title: { // Modal 标题 
type: String, 
defaulit:. *Y 


上 
show: { // 控制 Modal 是 否 显 示 
required: true, 
type: Boolean, 
twoWay: true 
}, 
width: { // Modal 宽度 
default: null 
}, 
callback: { // 点 击 确定 按钮 的 回调 函数 
type: Function, 
default : function() {} 
} 
}, 
computed: { // 计算 属性 
optionalWidth () { // 处 理 props 的 width 属性 
if (this.width === null) { 
return null; 
} else if (Number.isInteger (this.width)) { 
return this.width + "px 
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} 


return this.width; 
} 
}, 
watch: { 
show (val) { // show 值 变化 时 调用 该 函数 


var el = this.s$el; 


if (val) { 

el.style.display = 'block'; //show 值 为 true 时 ， 显 示 根 元 素 
} else { 

el.style.display = 'none'; //show 值 为 false 上 时， 隐藏 根 元 素 


} 

}, 

methods: { 
close () { 


this.show = false; 


} 
}) 
// 父 组 件 调用 方式 


// 需要 引入 http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css 样式 
// 父 组 件 中 使 用 modal 组 件 
<div id="app"> 





























<button @click="show = true">open</button> 

<modal :show.sync="show" width="300px" :callback="close"> 
<! 一 替换 modal 组 件 中 的 <slot name="modal-header"></slot> 插 模 --> 
<div slot="modal-header" class="modal-header">Title</div> 
<! 一 替换 modal 组 件 中 的 <slot name="modal-body"></slot> 插 模 --> 
<div slot="modal-body" class="modal-body"> 














<div class="inner"> 
Content 
</div> 
</div> 


<! 一 由 于 父 组 件 中 没有 设 定 slot="modal-footer" 的 元 素 ， 所 以 使 用 子 组 件 中 的 默认 
HTML 结构 --> 


</modal> 

</div> 

Var vm = new Vuel{ 
el : '#app', 
data, 5 1 


show : false 
二 
methods : { 


close : function() { 
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alert('save'); 





this.show = false; 
上 
} 
}); 
open 
Title 
Content 


































































































最 终 得 到 一 个 被 button 控制 打开 的 Modal 模 态 框 ， 并 且 内 容 由 父 组 件 定义 ， 并 提供 模 态 
框 的 宽度 及 确定 后 的 回调 函数 。 
) 6.5 动态 组 件 

Vue.js 支持 动态 组 件 ， Ea 根据 条 件 来 切换 不 同 的 组 件 。 

















即 多 个 组 件 可 以 使 用 同一 挂 载 点 ， 
使 用 保留 标签 <component> ， 通 过 绑 定 到 is 属性 的 值 来 判断 挂 载 哪 个 组 件 
在 路 由 控制 或 者 tab 切换 中 。 了 动态 组 件 的 基础 用 j 
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。 这 种 场景 往往 运 
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人 小节 移 介 绍 
































6.5.1 ”基础 用 法 


的 例子 来 说 明 一 下 动态 组 件 的 基础 用 







































































<div id="app"> 


// 相当 于 一 级 导航 





兰 ， 点 击 可 切换 页 面 
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<ul> 
<1i @click="currentView = 'home'">Home</1i> 
<l11i @click="currentView = "list"">List</1i> 
<1i @click="currentView = 'detail'">Detail</1i> 
</ul> 
<component :is="currentView"></component> 
</div> 
Var vm = new Vuel{ 
el '#app', 
data: { 
currentView: "home' 


}; 
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components: { 


home: { 
template : '<div>Home</div>' 
7 
二 再 二 六 下 
template : '<div>List</div>' 
7 
detail: { 
template : '<div>Detail</div>' 





} 
]) 


























component 标签 上 is 属性 决定 了 当前 采用 的 子 组 件 ，:is 是 v-bind:is 的 缩写 ， 绑 定 了 父 
生 。 顶 部 的 ul 则 起 到 导航 的 作用 ， 点 击 即 可 修改 currentView 


F 类 型 ， 需 要 注意 的 事 ，currentView 的 值 需要 
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值 ， 也 就 修改 component 标签 
和 父 组 件 实例 中 的 components 属性 的 key 相对 应 。 





















































6.5.2 keep-alive 


component 标签 接受 keep-alive 属性 ， 可 以 将 切换 出 去 的 组 件 保留 在 内 存 中 ， 避 人 免 重新 
泻 染 。 我 们 将 上 述 例 子 中 的 component 标签 修改 为 : 
























































<component :is="currentView" keep-alive></component> 











并 且 将 home 组 件 修 改 为 : 

















home: { 
template : '<div> \ 
<p>Home</p> \ 
Ul \ 
<11 v-for="item in items">{{ item }}</1li> \ 
</ul> \ 
BAe ib 
data : function() { 
return { 
items : [] 


} 

}, 

ready : function() { 
console.log('fetch data'); 
this.items = [1,; 2,; 3; 4; 3]}? 


}, 








i 





的 





竹下 ， 可 以 在 home 和 list 之 间 切 换 currentView，home 组 伯 











在 keep-alive 届 





吓 
上 凯 
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ps 





ready 也 数 只 运行 一 次 ， 可 以 看 到 控制 台 只 输出 了 一 次 “fetch data”。 而 将 keep-alive 属 
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去 除 后 ， 再 次 在 home 和 list 组 件 间 切 换 ， 会 发 现 每 点 击 到 home， 控 制 台 都 会 输出 一 次 “fetch 
data”s 
我 们 可 以 根据 该 特性 适当 地 进行 页 面 的 性 能 优化 ， 如 果 每 个 组 件 在 激活 时 并 不 要 求 每 次 
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都 实时 请 求 数 据 ， 那 使 用 keep-alive 可 以 避免 一 些 不 必要 的 重复 渲染 ， 导 致 用 户 看 到 停留 时 


间 过 长 的 空白 页 面 。 但 如 果 每 次 激活 组 件 都 需要 同 后 端 请 求 数 据 的 话 ， 就 不 太 适 合 使 

























































































属性 了 。 
Vue.js 2.0 中 keep-alive 属性 被 修改 为 标签 ， 例 如 : 





眶 | 






































4 keep 








<keep-alive> 
<component v-bind:is="view"></component> 


</keep-alive> 





6.5.3 activate 钧 子 函 数 


Vue.js 给 组 件 提供 了 activate 钩子 图 数 ， 作 用 于 动态 组 件 切换 或 者 静态 组 件 初始 化 的 过 























































































































旦 中 。activate 接受 一 个 回调 函数 做 为 参数 ， 使 用 函数 后 组 件 才 进 行 之 后 的 泻 染 过 程 。 我 们 将 
上 述 例子 中 的 home 组 件 修改 为 : 
home: { 
template : '<div> \ 
<p>Home</p> \ 
US AN 
<li v-for="item in items">{{ item }}</1Li> \ 
/EL N 
< OLY 
data : function() { 
return { 
items : [] 
} 
}, 
activate : function(done) { 


Var that = this; 
// 此 处 的 setTimeout 用 于 模拟 正式 业务 中 的 ajax 异步 请 求 数据 
setTimeout (function() { 

that.items = [1, 2 3, 4,; 35]? 












































done () ; 
}，1000) ; 
} 
} 
此 时 也 可 以 定义 两 个 component 作为 对 比 ， 并 设 定 其 中 一 个 属性 为 keep-alive : 

















<component :is="currentView"></component> 
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<component :is="currentView" keep-alive></component> 









































可 以 对 比 出 ， 再 次 激活 home 后 ， 未 使 用 keep-alive 的 component 会 延迟 1s 的 时 间 才 
泻 染 出 列表 。 


)6.6 Vue.js 2.0 中 的 变化 


本 小 节 主 要 说 明 下 Vue.js 2.0 中 对 于 如 






































法 及 api 的 一 些 相 关 变 化 。 
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6.6.1 event 


Vue.js 2.0 中 废弃 了 event 选项 ， 所 有 的 自 定义 事件 都 需要 通过 $emit, $on, $off 函数 来 
进行 触发 、 监 听 和 取消 监听 。 另 外 ， 废 弃 了 $dispatch 和 $broadcast 方法。 官方 认为 这 两 种 
方法 主要 依赖 于 组 件 的 树 形 结构 ， 而 当 组 件 结构 越 来 越 复杂 后 ， 这 种 事件 流 的 形式 将 难以 被 了 
解 ， 而 且 也 并 不 能 解决 兄弟 组 件 之 间 的 通信 问题 。 所 以 官方 推荐 使 用 集中 式 的 事件 管理 机 人 制 习 
处 理 组 件 间 的 通信 ， 而 不 是 依赖 于 组 件 本 身 的 结构 。 

官方 建议 可 以 直接 使 用 一 个 空 Vue 实例 来 处 理 简 单 的 事件 触发 机 
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Var bus = new Vue(); 
bus.$emit('create', { title : 'name'}); 
bus.$on('create', function(data) { 


// 进行 对 应 的 操作 
}) 





























这 样 使 用 的 话 ， 事 件 的 监听 和 触发 机 制 就 脱离 了 组 件 的 结构 ， 完 全 依赖 于 bus 这 个 实例 ， 
在 整个 项 目的 任意 地 方 我 们 都 可 以 设置 监听 和 触发 函数 。 例 如 : 





hl 












































<div id="app"> 
<comp-a></comp-a> 
<comp-b></comp-b> 
</div> 
Var bus = new Vue(); 
var vm = new Vuel({ 
el : '#app', 
components : { 
compA : { 
template : '<div> \ 
<input type="text" v-model="name" /> \ 
<button @click="create"> 添 加 </button> \ 
SAS bi i 
data < functionm()} 1 
return { 


name : '! 


上 
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methods 


Create 3: 


{ 


function() { 


bus.$emit('create', { name : this.name }); 


this.name = "''; 
} 
} 
}, 
compB : { 
template VL NN 


<li v-for="item in items">{{ item.name }} </1Li> \ 


< 


data 3 funetironmnt(t} 4 


return { 


items 
} 
Fs 


[ 


// mounted 为 Vue.js 2.0 中 新 的 生命 周期 函数 


mounted () 


{ 


Var that = this; 


bus.$on 


('create', function(data) { 


that.items.push (data); 


}) 


}); 





se。 gavin 
ee。 Cly 


























, 则 监 




















象 成 一 个 集中 式 的 事 伯 








听 这 个 create 事 4 








处理 器 ， 供 所 有 的 组 件 使 用 。 















































































































































































































































6.6.2 keep-alive 


如 下 : 























keep-alive 不 再 是 动态 组 件 component 标签 中 的 属性 ， 而 成 为 了 单独 的 标签 。 使 用 

















F comp—b 


在 comp-a 组 件 中 输入 内 容 ， 点 击 “ 添 加 ” 即 可 触发 create 事件 。 在 兄弟 组 伯 
牛 ， 并 把 传 入 的 值 添加 到 自身 的 items 数组 中 。 此 时 的 bus 实例 即 可 





而 在 相对 复杂 的 场景 中 ， 则 推荐 引入 状态 管理 机 制 ，Vuex 就 是 这 种 机 制 与 Vue.js 结合 
的 实现 形式 。 这 个 会 在 第 九 章 做 一 个 详细 的 说 明 。 
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6.6 ”Vue.js 2.0 中 的 变化 





<keep-alive> 
<component :is="currentView"></view> 


</keep-alive> 
























































keep-alive 也 可 以 不 和 component 配合 使 用 ， 单 独 包 庄 多 个 子 组 件 ， 只 需要 确保 所 有 了 
组 件 只 激活 唯一 一 个 即 可 。 例 如 : 












































<keep-alive> 
<comp-a v-if="active"></comp-a> 
<comp-b v-else></comp-b> 


</keep-alive> 





6.6.3 Slot 


slot 不 再 支持 多 个 相同 plot 属性 的 DOM 插入 到 对 应 的 slot 标签 中 ， 一 个 slot 只 被 使 用 
一 次 。 下 面 以 6.4.4 节 中 的 例子 来 说 明 : 


































































































// 父 组 件 中 定义 了 多 个 slot="" 
<div slot="modal-header" class="modal-header">Titlel</div> 








<div slot="modal-header" class="modal-header">Title2</div> 


// 子 组 件 


<slot name="modal-header"></slot> 



































在 Vue.js 1.0 中 ， 父 组 件 中 的 两 个 modal-header 都 会 添加 到 slot 中 ， 而 在 Vue.js 2.0 
第 二 个 modal-header 会 被 忽略 。 


另外 ，slot 标签 不 再 保存 自身 的 属性 及 样式 ， 均 由 父 元 素 或 被 插入 的 元 素 提供 样式 和 属性 。 
































于 




























































































6.6.4 refs 


子 组 件 索引 v-ref 的 声明 方式 产生 了 变化 ， 不 再 是 一 个 指令 了 ， 而 替换 成 一 个 子 组 件 的 
一 个 特殊 属性 ， 例 如 : 


<comp ref="first"></comp> //Vue.js 1.0 中 为 <comp v-ref="first"></first> 

















































































































调用 方式 并 没有 发 生变 化 ， 仍 采用 vm.$refs 的 方式 直接 访问 子 组 件 实例 。 
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Vue.js 本 身 只 提供 了 数据 与 视图 绑 定 及 组 件 化 等 功能 ， 如 果 想 用 它 来 开发 一 个 完整 











一 一 
草 


Vue.js 常 用 插件 































































































SPA (Single Page Application ) 应 用 ， 我 们 还 需要 使 用 到 一 些 Vue.js 的 插件 。 本 章 主 要 介 
绍 Vue-router 和 Vue-resouce,， 分别 能 提供 路 由 管理 和 数据 请 求 这 两 个 功能 。 除 此 之 外 ， 























试 都 有 非常 大 的 帮助 。 








)7.1 Vue-router 


Vue-router 是 给 Vue.js 














以 往 页 面 间 跳 转 都 由 后 端 MVC 

















































































































还 有 Vue-devtools， 这 是 一 款 方便 查看 Vue.js 实例 数据 的 chrome 插件 ， 这 对 我 们 开发 和 调 


提供 路 由 管理 的 插件 ， 利 用 hash 的 变化 控制 动态 组 件 的 切换 。 
























































的 Controller 层 控 制 ， 通 过 <a> 标签 的 href 或 者 直接 修 
































改 location.href， 我 们 会 向 服务 端 发 起 一 个 请 求 ， 服 务 端 响应 后 根据 所 接收 到 的 信息 去 获取 



























































数据 和 指派 对 应 的 模板 ， 泻 染 成 HTML 再 返回 给 浏览 器 ， 解 析 成 我 们 可 见 的 页 面 。Vue.js + 



































Vue-router 的 组 合 将 这 一 套 逻 辑 放 在 了 前 端 去 执行 ， 切 换 到 对 应 的 组 件 后 再 向 后 端 请 求 数据 ， 


SS) 


























填充 进 模 板 来 ， 在 浏览 器 端 完成 的 渲染 。 这 样 也 有 助 于 前 后 端 分 离 ， 前 端 不 


















































后 端的 逻辑 ， 只 需要 后 端 提供 数据 接口 即 可 。 





















































尘 
基 
kk 
二 


代码 会 采用 ES 








的 写法 ， 运 行 时 需要 使 用 Babel 进行 编译 。 


依赖 于 














Vue-router 可 以 直接 引 


用 编译 好 的 js 文件 ，CDN 地 址 为 : 
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7.1 Vue-router 





https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js 




















在 HTML 中 直接 用 script 标签 引入 即 可 ,例如 : 























<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js'></script> 
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min. 
js'></script> 























也 可 以 采用 npm 的 方式 安装 : 





npm install vue-router 

















引用 方式 如 下 : 











import Vue from 'vue'; 
import VueRouter from ‘vue-router'; 


Vue.use (VueRouter); 





7.1.2 基本 用 法 


vue-router 的 基本 作用 就 是 将 每 个 路 径 映 射 到 对 应 的 组 件 ， 并 通过 修改 路 由 进行 组 件 间 
的 切换 。 常 规 路 径 规则 为 在 当前 url 路 径 后 面 加 上 #1!/path，path 即 为 设 定 的 前 端 路 由 路 径 。 
例如 : 























































































































<div id="app"> 
<nav class="navbar navbar-inverse"> 
<div class="container"> 
<div class="collapse navbar-collapse"> 
<ul class="nav navbar-nav"> 
将 
<! 一 使 用 v-link 指令 ， path 的 值 对 应 跳 转 的 路 径 ， 即 #!/home --> 
<a v-link="{ path : '/home'}">Home</a> 
</1i> 
<1i> 
<a v-link="{ path : '/list'}">List</a> 
</1i> 
</ul> 
</div> 
</div> 
</nav> 
<div class="container"> 
<! 一 路 由 切换 组 件 template 插入 的 位 置 --> 
<router-view></router-view> 
</div> 
</div> 
js 代码 : 
// 创建 子 组 件 ， 相 当 于 路 径 对 应 的 页 面 
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Var Home = Vue.extend ({ 





template : '<hl>This is the home page</nh1>' 
BE 


// 创建 根 组 件 


Var APP = Vue.extend({}) 


// 创建 路 由 器 实例 


Var router = new VueRouter () 





// 通过 路 由 器 实例 定义 路 由 规则 ( 需要 在 启动 应 用 前 定义 好 ) 
// 每 条 路 由 会 映射 到 一 个 组 件 。 这 个 值 可 以 是 由 Vue .extend 创建 的 组 件 构造 函数 (如 Home ) 
// 也 可 以 直接 使 用 组 件 选 项 对 象 ( 如 '/1list' 中 component 对 应 的 值 ) 
router.map({ 
'/home': ({ 
component: Home 
}y 
"ylist"s. | 
component : { 
template: '<hl>This is the List page</h1l>' 


}) 








// 路 由 器 实例 会 创建 一 个 Vue 实例 ， 并 且 挂 载 到 第 参数 元 素 选 择 器 匹配 的 DOM 上 
router .start (App, '#app') 
最 终结 果 如 下 : 








Home 


This is the home page 


7.1.3 访 套 路 由 


























一 般 应 用 中 的 路 由 方式 不 会 像 上 述 例子 那么 简单 ， 往 往 会 出 现 二 级 导航 这 种 情况 。 这 时 
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7.1 Vue-router 






































就 需要 使 用 骨 套 路 由 这 种 写法 。 我 们 给 上 述 例 子 添加 一 个 Biz 组 件 ， 包 含 一 个 能 套 的 router- 
view， 修 改 如 下 : 





























Var Biz = Vue.extend ({ 
template : '<div> \ 
<hl>This is the some business channel</h1l> \ 
<div class="container"> \ 
<ul class="nav navbar-nav"> \ 
li AN 
<a v-link="{ path : \'/biz/list\'}">List</a> \ 
/li \ 
<1i>\ 
<a v-link="{ path : \'/biz/detail\'}">Detail</a> \ 
</1i> \ 
/UL>: \ 
</div> \ 
<router-view></router-view> \ 
</div>' 
}); 


路 由 配置 修改 如 下 : 









































router.map({ 
'/home': { 
component: Home 
}, 
A ei 
component : Biz, 
subRoutes : { 
轩 人 全 
component : { 
template : '<h2>This is the business list page</h2>' 


js 
'/detail' : { 
component : { 
template : '<h2>This is the business detail page</h2>' 















































点 击 Biz 中 的 List 链接 ，url 路 由 即 为 #!/biz/list， 页 面 显 示 如 下 : 
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This is the some business channel 


List Detail 


This is the business list page 








点 击 List 和 Detail 即 可 在 #!/biz/list 和 #1/biz/detail 之 间 切 换 ， 而 顶部 的 This is the 
some business channel 部 分 ， 即 Biz 组 件 中 非 <router-view> 部 分 则 保持 不 变 




















7.1.4 路 由 匹配 


Vue-router 在 设置 路 由 规则 的 时 候 ， 支 持 以 冒号 开头 的 动态 片段 。 例 如 在 设计 列表 分 页 
的 情况 下 ， 我 们 往往 会 在 url 中 带 入 列表 的 页 码 ， 路 由 规则 就 可 以 这 么 设计 : 








































































































outer .map ( 
'/list/:page': { 
component : { 





template: '<hl>This is the No.{{ S$route.params.page }} page</h1>' 
} 
} 
}) 


例如 /ist/1，/Wlist/2( 单 就 /list 路 径 并 不 会 匹配 ) 这 样 的 路 径 名 就 会 匹配 到 对 应 的 组 
件 中 ， 并 在 组 件 中 通过 路 由 对 象 (this.$route) 的 方式 获取 :page 具体 的 值 ( 具体 的 方法 会 在 
第 7.1.6 小 市 路 由 对 象 中 解释 )。 
条 路 由 规则 中 支持 包含 多 个 动态 片段 ， 例 如 : 




































































































































































ee 




















router.map( 
'/list/:page/:pageSize': 1 
component : { 
template: '<hl>This is the No.{{ S$route.params.page }} page, {ft 
$route.params.pageSize }} per page</h1l>' 
} 
}) 


除了 以 冒号 : 开头 的 动态 片段 :page 外 ，Vue-router 还 提供 了 以 * 号 开头 的 全 匹配 片段 。 


全 匹配 片段 会 包含 所 有 符合 的 路 径 ， 而 且 不 以 '/' 为 间隔 。 例 如 在 路 由 /list/ :page 中 ， 规 则 
匹配 /list/1 ,Wlist/2 路 径 ， 但 无 法 匹配 /list/1/10 这 样 的 路 径 。 而 /list/*page 则 可 以 匹 
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配 /list/1， 以 及 /list/1/10 这 样 的 路 径 ， 不 会 因为 '/" 而 中 断 匹 配 。pasge 从 














到 的 字符 串 ， 即 1 或 1/10。 


7.1.5 ”具名 路 由 





























7.1 Vue-router 


也 就 成 为 整个 匹配 





















































在 设置 路 由 规则 时 ， 我 们 可 以 给 路 径 名 设置 

















个 别名 ， 方 便 进 行路 





跳 转 ， 而 不 需要 去 

















记 住 过 长 的 全 路 径 。 例 如 : 

















router.map({ 
'/list/:page': { 
name: "1ist' 


component : { 


template: '<hl>This is the No.{{ S$route.params.page }} page</h1>' 


} 
} 
}) 




















我 们 就 可 以 使 用 v-link 指令 链接 到 该 路 径 











<a v-link="{ name: 'list', params: { 


page : 1 }}">List</a> 





7.1.6 ”路 由 对 象 































































































路 由 对 象 总 共 包 含 了 以 下 几 个 属性 : 
1. $route.path 


































































































类 型 为 字符 串 ， 为 当前 路 由 的 绝对 路 径 ， 如 /list/1。 
2. $route.params 
类 型 为 对 象 。 包 含 路 由 中 动态 片段 和 全 匹配 片段 的 键 值 对 。 如 









































路 径 ， 就 可 以 通过 this.$route.params.page 的 方式 


3. $route.query 























类 型 为 对 象 。 包 含 路 
this.$route.query.sort 即 可 得 到 createTime。 


4. $route.router 














































































































即 路 由 实例 ， 可 以 通过 调用 其 go，replace 方法 进行 跳 转 。 我 们 在 组 件 实例 中 也 可 以 















































接 调 用 this.$router 来 访问 路 由 实例 。router 具体 的 属性 和 api 方法 将 在 7.1.10 路 由 实例 











行 说 明 。 
5. $route.matched 

类 型 为 数组 。 包 含 当前 匹配 的 路 径 
createTime 路 径 中 ，$route.matched 值 如 下 : 








/| 






























































o 





在 使 用 Vue-router 启动 应 用 时 ， 每 个 匹配 的 组 件 实例 中 都 会 被 注入 router 的 对 象 ， 称 
> 为 路 由 对 象 。 在 组 件 内 部 可 以 通过 this.$route 的 方式 进行 调用 。 


上 述 例子 中 的 /list/ :page 
来 获取 路 径 上 page 的 从 





查询 参数 的 键 值 对 。 例 如 /list/1?sort=createTime,， 通过 






























































证 






































所 有 片段 对 应 的 配置 参数 对 象 。 例 如 在 /list/l?sort= 
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Y [Object, queryParams: Object} 
vO: Object 
Vvhandler: Object 
bp component: function VueComponent (options) 
fuLLPath: "/list/*page" 
path: "/list/*page" 
>__proto_: Object 
isDynamic: true 
vparams: Object 
page: "1" 
>__proto_: Object 
>__proto_: Object 
length: 1 
Vv queryParams: Object 
sort: "createTime" 
>__proto_: Object 
>__proto_: 0bject 


6. $route.name 
类 型 为 字符 串 ， 即 为 当前 路 由 设置 的 name 属性 





















































7.1.7 v-link 





















































v-link 是 vue-router 应 用 中 用 于 路 径 间 跳 转 的 指令 ， 其 本 质 是 调用 路 









































身 的 go 函数 进行 跳 转 。 该 指令 接受 一 个 JavaScript 表达 式 ， 而 上 且 












































数据 。 
常见 的 使 用 方式 包含 以 下 两 种 : 
1 ) 直接 使 用 字面 路 径 : 



















































































<a Vv-link="home">Home</a> // 注意 这 里 双 引 号 里 的 home 外 
































会 变 成 读 取 组 件 data 属性 中 的 home 值 

















O 











或 者 写成 : <a v-link='"{ path : 'home'}">Home</a> 















































划 
漠 
= 














2 ) 使 用 具名 路 径 ， 并 可 以 通过 params 或 query 设置 路 径 






































实例 router 本 


可 以 直接 使 用 组 件 内 绑 定 的 








单 引号 ， 不 然 


的 动态 片段 或 查询 变量 : 





<a v-link="{ name : 'list', params: { page : 1} 





">List Page 1</a> 




















此 外 ，v-link 还 包含 其 他 参数 选项 
1. activeClass 























类 型 为 字符 串 ， 如 果 当 前 路 径 包含 v-link 中 path 的 值 ， 该 元 素 会 


























> 





直 的 类 名 ， 默 认为 v-link-active。 
2. exact 




































































动 添 加 activeClass 


类 型 为 布尔 值 。 在 判断 当前 是 否 为 活跃 路 径 时 ，v-link 默认 的 匹配 方式 是 包容 性 匹配 ， 























即 如 果 v-link 中 path 为 /list， 那 以 Mist 路 径 为 开头 的 所 有 路 径 均 为 活跃 路 径 。 而 设 












































为 true 后 ， 则 只 有 当 路 径 完全 一 致 时 才 认 年 为 活跃 路 径 ， 然 后 添加 class 类 名 。 





3. replace 






































exact 


类 型 为 布尔 值 。 若 replace 值 设 定 为 true， 则 点 击 链接 时 执行 的 是 router.replace() 方 法 ， 
































而 不 是 router.go00 方法 。 由 此 产生 的 跳 转 不 会 留 下 历史 记录 。 
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4. append 

类 型 为 布尔 值 
例如 在 路 径 /list 下 ， 设 
变化 为 /list/1; 车 不 设 

















。 若 append 值 设 定 为 true， 则 确保 














链接 <a Vv 
































7.1.8 ”路 由 配置 项 





















































+E append:true， 路 径 3 


link="{path: "1' 
变化 为 / 

































































，append : 


Ls 


true}">1</a>， 点击 


7.1 


链接 的 相对 路 径 添 加 到 当前 路 径 之 后 
的 枚 


二 





















































































































































































































































































































































在 创建 路 由 器 实例 的 时 候 ，Vue-router 提供 了 以 下 参数 可 供 我 们 配 
1. hashbang 

默认 值 为 true， 即 只 在 hash 模式 下 可 用 。 当 hashbang 值 为 true 时 ， 所 有 的 路 径 会 
以 #1! 为 开头 。 例 如 <a v-link="{ path : /home'">Home</a>， 浏 览 器 路 径 即 为 http:// 
hostname/#!/home 
2. history 

默认 值 为 false。 设 为 true 时 会 启动 HTML5 history 模式 ， 利 用 history.pushState 
和 history.replaceState0 来 管理 浏览 历史 记录 。 于 使 用 了 history 模式 管理 ， 所 以 使 
pushState 生成 的 每 个 url 都 需要 在 Web 服务 器 上 有 对 应 的 响应 ， 否 则 单 击 “ 刷 新 ”会 返 匠 
404 错误 ， 并 且 在 本 地 开发 的 时 候 ， 需 要 将 应 用 置 于 服务 器 环境 中 (通过 localhost 访问 应 用 ， 
而 不 是 直接 访问 文件 )。 

常见 的 人 和 可 以 修改 其 目录 下 的 conf/nginx.conf 或 conf/vhost/#.conf 文件 ， 
添加 如 下 配置 足 pushSate 的 需求 : 

server { 


listen 


server name 
index index.html index.php; 
root /www 
location / { 
// 这 是 一 个 正则 匹配 ， 将 所 有 该 域名 下 的 url 请 求 ， 都 返回 SPA 应 用 的 index.html 
pushState 有 响应 


rewrite 


} 


80; 
localhost; 


// 端口 号 


// 或 填写 服务 器 域名 


// 默认 访问 文件 


// 文件 放置 路 径 


(.+)$ /index.html last; 


， 确 保 





3. abstract 








































































































































































































































































































默认 值 为 false。 提 供 了 一 个 不 依赖 于 浏览 器 的 历史 管理 工具 。 在 一 些 非 浏 览 器 场景 中 会 
非常 有 用 ， 例 如 electron (桌面 软件 打包 工具 ， 类 似 于 node-webkit ) 或 者 cordova (native 
app 打包 工具 ， 前 身 为 phonegap ) 应 用 。 

4. root 

默认 值 为 aul， 仅 在 HTML5 history 模式 下 可 用 。 可 设 个 应 用 的 根 路 径 ， 例 

如 : /app。 这 样 应 用 中 的 所 有 跳 转 路 径 都 会 默认 加 在 这 个 根 路 径 之 后 ， 例 如 <a v-link='/ 














home'>Home</a>， 路 径 即 变化 为 /app/home。 
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5. linkActiveClass 


























默认 值 为 v-link=-active。 与 v-link 中 的 activeClasss 选项 类 似 ， 这 里 相当 于 是 一 个 4 























局 的 设 定 。 符 合 匹 配 规则 的 链接 即 会 加 上 linkActiveClass 设 定 的 类 名 。 
6. saveScrollPosition 













































































| 
这 


默认 值 为 false， 仅 在 HTML5 history 模式 下 可 用 。 当 用 户 点 击 后 退 按钮 时 ， 借 助 HTML5 





















































history 中 的 popstate 事件 对 应 的 state 来 重 置 页 面 的 滚动 未 知 。 需 要 注意 的 是 ， 
view 设置 了 场景 切换 效果 时 ， 该 属性 不 一 定 能 生效 。 
7. transitionOnLoad 









































当 router-- 












































默认 值 为 false。 在 router-view 中 组 件 初 次 加 载 时 是 否 使 用 过 渡 效 果 。 默 认 情 况 下 ,组 















































件 在 初次 加 载 时 会 直接 浑 染 ， 不 使 用 过 湾 效 果 。 
8. suppressTransitionError 
默认 值 为 false。 设 定 为 true 后 ， 将 忽略 场景 切换 钩子 函数 中 发 生 的 异常 。 



























































7.1.9 ”route 钧 子 函 数 


在 使 用 Vue-router 的 应 用 中 ， 每 个 路 由 匹配 到 的 组 件 中 会 多 出 一 个 route 选项 。 在 这 


















































































































































个 选项 中 我 们 可 以 使 用 路 由 切换 的 钧 子 函 数 来 进行 一 定 的 业务 逻辑 操作 。 以 下 面 代码 为 例 ， 介 


























绍 这 些 钩子 函数 的 运行 机 制 和 触发 时 机 。 








Var List = Vue.extend ({ 





template : '<hl>This is the No.{{ S$route.params.page }} page</hl1>', 
route : { 
data +: function{ttransition)} 1{ 





oonmsole.log ("data'); 
transition.next () ; 
}, 

activate : function(transition) { 
console.log('activate'); 
transition.next () ; 

jy 

deactivate: function(transition) { 
console.log(deactivate); 
transition.next ();} 

}, 

canActivate : function(transition) { 
console.log('canActivate'); 
transition.next ()} 

}, 

canDeactivate : function(transition) { 
console.log('canDeactivate'); 
transition.next () ; 

] v 

canReuse : function (transition) { 
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console.log('canReuse'); 


return truss 























F 面 这 个 例子 可 以 看 出 ，route 提供 了 6 个 钩子 函数 ， 分 别 如 下 。 
canActivate0 : 在 组 件 创建 之 前 被 调用 ， 验 证 组 件 是 否 可 被 创 于 
activate0: 在 组 件 创建 且 将 要 加 载 时 被 调用 。 
data0: 在 activate 之 后 被 调用 ， 用 于 加 载 和 设置 当前 组 件 的 数 和 
canDeactivate(: 在 组 件 被 移出 前 被 调用 ， 验 证 是 否 可 被 移出 。 
deactivate(): 在 组 件 移 出 时 调用 。 
canReuse(): 决定 组 件 是 否 可 被 重用 。 这 种 场景 通常 发 生 在 /list/1 切换 到 /list/2 时 ， 如 
canReuse 返回 值 为 true， 则 组 件 在 切换 后 会 略 过 canActivate 和 activate 两 个 阶段 ， 直 
接 调 用 data 钩子 函数 。 若 canReuse 返回 值 为 false， 则 需 完整 经 历 激活 的 三 个 钩子 函数 。 
我 们 可 以 利用 上 文中 的 List 组 件 设置 一 个 路 由 规则 : 
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router.map({ 
'/home': { 
component: { 
template : '<hl>This is the home page</h1l>', 


’ 
'/list/:page': { 
component : List 

































































在 home 和 list 之 间 切 换 ， 我们 可 以 看 到 控制 台 输 出 结果 如 下 : 
canActivate 5.html:66 
activate 5.html:58 
data 5.html:54 
canDeactivate 5.html:70 
deactivate 5.html:62 

> 

在 /list/1 与 /list/2 之 间 切 换 ， 结 果 如 下 : 

canActivate 5.html:66 

activate 5.html:58 

data 5.html:54 

canReuse 5.html:74 

data 5.html:54 
> 
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在 每 个 钩子 函数 中 ， 都 接受 一 个 transition 对 象 作为 参数 ， 我 们 称 之 为 切换 对 象 。 主 要 
包含 以 下 属性 和 方法 。 
ransition.to: 将 要 切换 到 路 径 的 路 由 对 象 ( 路 由 对 象 详 见 第 7.1.6 小 市 )。 
ransition.from: 当前 路 径 的 路 由 对 象 。 
ransition.next(): 可 以 通过 调用 该 方法 使 切换 过 程 进入 下 一 阶段 ， 这 样 也 就 支持 了 在 
钩子 函数 内 部 使 用 异步 方法 的 情况 。 比 如 进入 某 个 路 径 前 我 们 需要 校 验 用 户 是 否 具 有 某 种 权 
限 ， 而 这 一 般 需 要 和 后 端 进 行 数 据 交 互 来 进行 验证 。 我 们 只 需要 在 异步 的 回调 函数 中 执行 
transition.next() 即 可 确保 在 获取 到 数据 后 才 执 行 切 换 过 程 的 下 一 阶段 。 
ransition.abort([reason]): 调用 该 方法 可 以 终止 或 者 拒绝 此 次 切换 。 需 要 注意 的 是 ， 在 
activate 和 deactivate 中 调用 该 方法 时 并 不 会 把 应 用 退 到 前 一 个 路 由 状态 ， 只 有 在 canActivate 
和 canDeactivate 内 调用 才 会 回 退 。 
ransition.redirect(path): 取消 当前 切换 并 重 定向 到 男 一 个 路 由 。 参 数 接受 字符 捉 或 者 
路 由 对 象 ， 并 且 如 果 不 设 定 新 的 params 和 query 的 话 ， 会 保留 原始 transition.to 的 params 
和 query。 
另外 ， 这 些 钧 子 函 数 在 切换 过 程 中 也 起 到 了 不 同 的 作用 ， 我 们 分 类 说 明 如 下 。 
activate/deactivate: 返回 值 可 为 Promise 对 象 。ES6 提供 了 原生 的 Promise 对 象 ， 可 
以 通过 直接 返回 Promise.resolve(true)/Promise.reject([reason]) 来 控制 是 否 进 行 切 换 的 下 一 步 ， 
或 者 返回 return new Promise(function (resolve, reject){resolve(true)/reject([reason]) )。 
canActivate/canDeactivate: 返回 值 可 以 是 同 activate/deactivate 一样 的 Promise 对 
象 ， 也 可 以 是 布尔 值 true/false， 和 使 用 切换 对 象 transition.next0/transition.abort0 效果 一 致 。 
data:data 钧 子 在 每 次 路 由 变动 的 时 候 都 会 被 调用 ， 特 别 是 当 组 件 被 重用 时 ， 往 往 跳 
过 activate 只 执行 data 函数 ， 如 上 述 例子 中 的 /list/1 切换 到 /list/2。 所 以 我 们 经 常 把 加 载 
动态 数据 放 在 data 1 执行 ， 而 且 当 组 件 从 activate 切换 到 data 钩子 时 ， 会 得 到 一 个 
$loadingRouteData 属性 ， 默 认 值 为 true， 当 data 函数 执行 完 进 入 下 一 步 时 将 切换 成 false。 
这 样 有 助 于 我 们 做 一 些 loading 等 符 方 面 的 处 理 ， 避 免 用 户 长 时 间 得 不 到 反馈 。 与 其 他 钧 子 函 
数 不 同 的 是 ， 我 们 可 以 在 调用 data 函数 的 transition.next(data) 时 传 入 一 个 data 对 象 ， 可 以 
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次 




























































































































































































为 组 件 的 data 附 上 相应 的 属性 值 。 例 如 : 
route: { 
data : function (transition) { 


transition.next({ page : transition.to.params.page }) 


} 

















这 样 就 可 以 赋值 给 了 组 件 的 data.page。 另 外 ， 还 可 以 通过 Promise 的 then 回调 函数 
的 返回 值 来 设置 ， 例 如 : 

























































































route: 





data % functiom() + 


return Promise.all([ 
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// 后 端 数 据 接口 ， 需 要 符合 Promise 形式, 或 可 通过 vue-resource 插件 实现 
// 详情 可 见 第 7.2 节 中 的 vue-resource 的 相关 说 明 


userService.getIinfo(), 


productsService.getList() 


return { 


.then (function (reps){ 


user : reps[0], 


products : reps[1] 





Te 











全 局 的 钩子 函数 ， 以 及 配置 路 
性 和 api 方法 。 
主要 的 公开 


10 ”路 由 实例 属性 及 方法 


在 Vue-router 启动 的 应 用 
this.$router ( 或 者 使 用 路 由 对 象 $route.router ) 进行 访问 。 这 个 router 实例 主要 包含 了 一 些 





















































1， 每 个 组 件 会 被 注入 router 实例 ， 可 以 在 组 件 内 通过 



















































































规则 ， 进 行路 由 切换 等 api。 本 节 主 要 介绍 路 由 实例 的 主要 属 






















































































al 





1. router.app 








类 型 为 组 件 实例 ， 即 为 路 


件 构 造 器 函数 创建 的 。 
2. router.mode 








I 
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1. router.start(App, el) 


2. router.stop() 





以 使 
































性 有 以 下 两 个 。 









































开 


的 根 Vue 实例 ， 是 由 调用 router.start(0 传 入 的 Vue 组 























启动 路 由 应 用 ， 通 过 传 入 的 组 件 构 造 器 App 及 挂 载 元 素 el 创建 根 组 件 。 











类 型 为 String， 值 可 以 为 HTML5, hash 或 apstract， 表示 当前 路 由 所 采取 的 模式 。 
常见 api 方法 如 1 






























































3. router.map() 
















































































富 目 监听 popstate 和 hashchange 事件 。 调 用 此 方法 后 ，router.app 没有 被 销毁 ， 仍 可 
] router.go(path) 进行 跳 转 ， 也 可 以 不 使 用 参数 直接 调用 router.start0 来 





























ta 











启 路 o 

































































定义 路 由 规则 的 方法 。 包 含 component 和 subRoutes 两 个 字段 ， 主 要 用 于 url 匹配 的 










































































组 件 及 艇 套路 由 。 设 定 的 路 径 也 可 以 通过 : 冒号 或 * 号 的 方式 进行 匹配 ,传递 到 路 由 对 象 


$route.params 中 。 























4. router.on() 


























添加 一 条 顶级 的 路 由 配置 ， 




















] 法 和 router.map 类 似 。 例 如 : 








router.on('/home', 


component : { 
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template : '<hl>This is the home page.</h1l>' 
} 
}) 5; 





5. router.go(path) 

跳 转 到 一 个 新 的 路 由 。path 可 以 是 字符 串 也 可 以 是 包含 跳 转 信息 的 对 象 。 若 使 用 字符 串 时 ， 
url 直接 替换 成 path 的 值 。 如 果 path 不 以 /开头 ， 则 直接 添加 到 当前 url 结尾 。 若 path 为 对 象 ， 
则 支持 以 下 2 
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种 格式 : 第 一 种 为 { path : …，append: true }， 这 种 形式 同 直接 使 用 字符 串 
类 似 ，append 选项 为 可 选 ， 铬 设置 成 true， 则 确保 path 相对 路 径 被 添加 到 当前 路 径 之 后 ; 第 
二 种 为 { name : '.', params : 人 }, guery:{})}，name 为 具名 路 径 ，params 和 query 为 可 选 。 男 外 ， 
这 两 种 格式 都 支持 replace 选项 ， 若 replace 设置 为 true， 则 该 跳 转 不 产生 一 个 新 的 历史 记录 。 
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7.1.11 vue-router 2.0 的 变化 


随 着 Vue.js 升级 到 2.0 后 ，Vue-router 也 相应 做 了 升级 。 除 了 适 配 Vue.js 2.0 外 ，vue- 
router 2.0 对 自身 的 使 用 方式 ， 属 性 及 钩子 函数 也 做 出 了 明显 的 改变 。 本 节 主 要 从 以 下 几 个 方 
































































































































而 进行 说 明 。 
1. 使 用 方式 
VueRouter 的 初始 化 方式 、 路 由 规则 配置 和 启动 方式 均 发 生 了 变化 ， 例 如 
const router = new VueRouter (1{ 
// 路 由 规则 在 实例 化 VvueRouter 的 时 候 就 直接 传 入 ， 而 不 是 调用 map 方法 再 进行 传说 
routes : [ 
{ path : '/home', component: Home} 
] 
} 
// ”启动 方法 也 发 生 了 变化 ，router 实例 直接 传 入 Vue .js 实例 中 ， 并 调用 Smount 方法 挂 载 到 
DOM 元 素 中 


const app = new Vuel({ 
roOUNter $s FOouter 


}) .$mount ('#app') 






























































生来 进行 标记 ， 而 且 其 中 的 path 路 


ew 
Ht 


网 套路 由 的 配置 方法 也 发 生 了 变化 ， 改 用 children 届 
径 不 需要 以 ',/" 开头 ， 否则 会 认为 从 根 路 径 开头 。 













































































Const router = new VueRouter({ 
routes: [ 
{ 

path;: '/biz', 

component: Biz, 

children: [ 

{ 
atthe LieEY; 
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component: List 
}, 
{ 
path: 'detail', 
component: Detail 





2.， 跳 转 方式 
路 由 跳 转 的 方式 也 发 生 了 变化 ， 首 先是 废弃 了 v-link 指令 ， 采 用 <router-link> 标签 来 
创建 a 标签 来 定义 链接 。 例 如 : 













































































<router-link to="/home"> 
Home 
</router-link> 


























其 中 的 to 属性 和 v-link 所 能 接受 的 属性 相同 ， 例 如 { name : 'home', params : {"….}}。 
时 次 使 用 router 实例 方法 进行 跳 转 的 api 也 修改 成 了 push0， 接受 的 选项 参数 基本 没有 
变化 ， 例 如 : 



















































































router.push({ name : 'home', params : {°*%…} }) 
































router.go() 方法 不 再 表示 跳 转 ， 而 是 接受 一 个 整 型 参数 ,作用 是 在 history 记录 中 辣 前 
或 者 后 退 多 少 步 ， 类 似 window.history.go(n)。 
router 实例 的 api 方法 push0 、replace0 、go0 主要 是 模拟 window.history 下 的 pushState0、 
replaceState() 和 go0 的 使 用 方法 来 实现 的 ， 并 且 确 保 router 在 不 同 模式 下 (hash、history ) 
表现 的 一 致 性 。 
3. 钩子 函数 
Vue-router 基本 重新 定义 了 自身 的 钩子 函数 ， 我 们 可 以 将 其 分 为 三 个 方面 : 
1 ) 全 局 钩子 。 在 初始 化 VueRouter 后 直接 使 用 router 实例 进行 注册 ， 包 含 beforeEach 
和 afterEach 两 个 钩子 ， 在 每 个 路 由 切换 前 / 后 调用 。 
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router.beforeEach((to, from, next) => { 
// to: 即将 要 进入 的 路 由 对 象 
// from: 当前 正 要 离开 的 路 由 对 象 
// next: 进行 下 一 状态 ， 切 记 ， 一 定 要 在 结束 业务 逻辑 后 调用 next 函数 ， 不 然 钓 子 函数 就 不 
会 被 resolved 
}) 
router.after (route=> { 
// route : 进入 的 路 由 对 象 
}) 
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上 





2 ) 单个 路 由 钩子 。 这 个 需要 在 路 由 配 : 




















对 的 时 候 直 接 定 义 ， 例 如 : 









































const router = new VueRouter({ 
routes: [ 
{ 
path: '/home', 
component: Home, 
beforeEnter: (to, from, next) => { 


// 参数 和 全 局 钩子 beforeEach 一 致 


] 


3 ) 组 件 内 钧 子 。 在 组 件 内 定义 ， 例 如 




















const Home = { 
template:  ...， 
beforeRouteEnter (to, from, next) => { 
// 参数 与 全 局 钩子 beforeEach 一 致 
// 切记 当前 钩子 执行 时 ， 组 件 实例 还 没 被 创建 ， 所 以 不 能 调用 组 件 实 例 this 
}, 
beforeRouteLeave (to, from, next) => { 


// 路 由 切换 出 该 组 件 时 调用 ， 此 时 仍 可 以 访问 组 件 实例 `this、 


} 
4. 获取 数据 
由 于 钩子 函数 的 变化 , 在 Vue.js 2.0 中 也 就 不 存在 使 用 data 钩子 来 处 理 请 求 数据 的 逻辑 
了 ， 可 以 通过 监听 动态 路 由 的 变化 来 获取 数据 。 例 如 
































































































































const List = { 
template: '...', 
watch: { 
"sroute' (ti fro6m) 六 


// 对 路 由 变化 作出 响应 ， 在 此 处 理 业 务 逻 辑 


} 





而 且 在 Vue.js 2.0 中 ， 我 们 既 可 以 在 导航 完成 之 前 获取 数据 ， 也 可 以 在 导航 完成 之 后 获 
取 数 据 。 在 导航 完成 之 后 获取 数据 ， 是 为 了 在 获取 数据 期 间 展示 一 个 loading 状态 ， 我 们 可 以 
在 组 件 的 create( 钩子 函数 和 watch : { route :"'} 中 调用 获取 数据 的 函数 ， 例 如 : 
































































































































export aqefault { 
data () { 


return { 
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}, 

created () { 
// 组 件 创建 完 后 获取 数据 
this.fetchData() 


}, 


watch: { 
// 如 果 路 由 有 变化 ， 会 再 次 执行 该 方法 
'$route': 'fetchData' 

}, 

methods: { 
fetchData () { 


// 调用 异步 请 求 获取 数据 


】 



































































































































在 导航 获取 之 前 完成 数据 ， 我 们 可 以 在 beforeRouteEnter 钩子 中 获取 数据 ， 并 且 只 有 
当 数 据 获取 成 功 或 确定 有 权限 后 才 进 行 组 件 的 泻 染 ， 否 则 就 回 退 到 路 由 变化 前 的 组 件 状态 。 





例如 : 
import pageSrv from './api/pages' // 此 处 先 模拟 一 个 获取 数据 的 模块 





export aqefault { 
data () { 
return { 
| 


yy 
beforeRouteEnter (to, from, next) { 


pageSsrv.get (to.params.page, (err, data) => 





if (err) { 
next (false); // 中 断 当 前 导航 
} else { 


next (vm => { 
vm.list = data; 
’ 
} 
} 
}, 
watch: { 
$sroute () { 
this.list = null; 
pageSrv.get (this.$route.params.id, (err, data) => { 
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1 terre) 4 
// 处 理 展 示 错 误 的 逻辑 
} else { 
this.list = data; 





5. 命名 视图 
Vue-router 2.0 中 允许 同 级 展示 多 个 视图 ， 而 不 是 藤 套 展示 ， 可 以 通过 给 <router- 
有 性 的 方式 匹配 不 同 的 组 件 ， 如 果 没 有 设置 name， 默 认为 default。 例如: 



























































ul 


























view> 添加 name 














0 











<router-view></router-view> 
<router-view name='main'></router-view> 
const router = new VueRouter ({ 
routes: [ 
paths WAV 
components: { // 要 注意 这 里 的 属性 是 components， 而 不 是 component 
default: Nav, 


main: Main 


] 
}) 





)7.2 Vue-resource 












































在 实际 开发 SPA 应 用 时 ， 一 般 和 后 端 都 会 采用 异步 接口 进行 数据 交互 。 传 统 情况 下 ， 我 
们 常用 jQuery 的 $.ajax0 方法 来 做 异步 请 求 。 但 Vue.js 并 不 依赖 于 jQuery， 我 们 也 并 不 需 
要 为 了 异步 请 求 这 个 功能 就 额外 引用 jQuery。 所 以 这 里 就 和 大 家 介绍 下 Vue.js 的 插件 Vue- 
resouce， 它 同样 对 异步 请 求 进行 了 封装 ， 方 便 我 们 同 服务 疝 进行 数据 的 交互 。 本 节 以 Vue- 
resource 1.0.2 版 本 进行 说 明 。 









































































































































7.2.1 引用 方式 


同 vue=-router 类 似 ， 我 们 可 以 直接 引用 vue-resource 的 CDN 路 径 : 
































<script src="https://cdn.jsdelivr.net/vue.resource/1.0.2/vue-resource. 
TS "> Stilet> 












































也 可 以 通过 npm install vue-resource 方式 进行 安装 ， 并 通过 Vue.use() 方法 进行 
调用 : 
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import VueResource from '‘'vue-resource'; 


Vue.use (VueResource); 





7.2.2 使 用 方式 















































安装 好 Vue-resource 之 后 ,在 Vue 组 件 中 ， 我们 就 可 以 通过 this.$http 或 者 使 用 全 局 
变量 Vue.http 发 起 异步 请 求 ， 例如 ， 





























Var List = Vue .extenad ({ 





route 
// vue-router 中 的 data 钩子 函数 ， 
data functionmt{transition)}. 开 
// 运行 这 段 代码 需要 在 服务 器 环境 中 ， 即 localhost 下 ， 直 接 访问 文件 运行 这 段 代 码 会 抛 出 异常 
this.$http 
.get('/api/list?pageNo=' + transition.to.params .page); 
.then (function (rep)t{ 
// 成 功 回 调 函数 
transition.next({ 
18t ep data 
元 
}, function (repP) { 
// 失败 回调 函数 
transition.next({ 


data : rep.data 


Fy 
template: '<hl>This is the list page</h1>' 
}) 









































EL 


this.$http 支持 Promise 模式 ,使 用 .then 方法 人 处理 回调 函数 ， 接 受 成 功 / 失败 两 个 回调 
函数 ， 一 般 会 在 回调 函数 中 再 调用 transition.next0 方法 ， 给 组 件 的 data 对 象 赋值 ， 并 # 
组 件 的 下 一 步骤 。 










































































站 
一 
二 



































7.2.3 $http 的 api 方 法 和 选项 参数 


this.$http 可 以 直接 当做 函数 来 调用 ， 我 们 以 下 面 这 个 例子 来 对 其 选项 进行 说 明 : 










































































thnis.s$httplt 


Url s /api/list", // url 访 问 路 径 
method : '', // HTTP 请 求 方法 ,例如 GET, POST, PUT, DELETE 等 
body : {}, // request 中 的 body 数据 ， 值 可 以 为 对 象 ，String 类 型 ， 也 可 以 是 


FormData 对 象 
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params : {}, // get 方法 时 url 上 的 参数 ,例如 /api/list?page=1 

headers: {}, // 可 以 设置 request 的 header 属性 

timeout : 1500， // 请 求 超时 时 长 ， 单 位 为 毫秒 ， 如 果 设 置 为 0 的 话 则 没有 超时 时 长 

before : function(request) {}， // 请求 发 出 前 调用 的 函数 ， 可 以 在 此 对 request 
进行 修改 











progress: function(event) {}，// 上 传 图 片 、 





音频 等 文件 时 的 进度 ，event 对 象 会 


包含 上 传 文件 的 总 大 小 和 已 上 传 大 小 ， 通 常 可 以 用 来 作为 进度 条 效果 

credentials : boolean， // 默认 情况 下 ， 跨 域 请 求 不 提供 凭据 (cookie、HTTP 认证 及 
客户 端 SSL 证明 等 )。 该 选项 可 以 通过 将 XMLHttpRequest 的 withCredentials 属性 设置 为 true， 
即 可 以 指定 某 个 请 求 强制 发 送 凭 据 。 如 果 服 务 器 接收 带 和 凭据 的 请 求 ， 会 用 Access-Control-Allow- 


Credentials: trueHTTP 头 部 来 响应 


emulateHTTP: boolean， // 设置 为 true 后 ，PUT/PATCH/DELETE 请 求 将 被 修改 成 


POST 请 求 ， 并 设置 neader 属性 xX-HTTP-Method-Override。 


常用 于 服务 端 不 支持 REST 写法 轩 


emulateJSON : boolean // 设置 为 true 后 , 会 把 request body 以 application/ 
x-www-form-urlencoded 的 形式 发 送 ， 相 当 于 form 表单 提交 。 此 时 http 中 的 header 的 content- 
type 即 为 application/x-www-form-urlencoded。 常 用 于 服务 器 端 未 使 用 application/json 


编码 时 





















































此 外 ，this.$http 还 可 以 直接 调用 api 方 法， 相当 于 提供 了 一 些 快捷 方式 ， 例 如 : 








get (url, [options]) 
head (url, options]) 





delete(url, [options]) 

jsonp (url, [options]) 
post(url;, [bodyl: [loptions]) 
But (urly., [bodyl;: Loeptionsl) 
Datei (ur [Ded options]) 

















二 
5 


头 上 方法 均 可 以 采用 
似 的 形式 进行 调用 。 



















































































接受 一 个 response 的 参数 ， 上 有 具体 的 属性 和 方法 如 下 。 
url: response 的 原始 url。 
body : response 的 body 数据 ， 可 以 为 Object，Blob， 
headers : response 的 Headers 对 象 。 
ok: 布尔 值 ， 当 HTTP 状态 码 在 200 和 299 之 间 时 为 
status: response 的 HTTP 状态 码 
statusText: response 的 HTTP 状态 描述 。 
另外 还 包含 以 下 三 种 api 方法 。 


text(): Promise 类 型 ， 把 response body 解析 成 字符 日 







































































is.$http.get(url，options) 或 Vue.http.get(url，options) 这 样 类 




















在 发 起 异步 请 求 后 ， 我 们 可 以 采用 this.$http.get(…).then0 的 方式 处 理 返 回 值 。.then0 














或 者 String 类 型 。 





true 


已 
Po 


json0: Promise 类 型 ， 把 response body 解析 成 json 对 象 。 














blob0: Promise 类 型 ， 把 response body 解析 成 blob 对 象 ， 即 二 进 制 文件 


























视频 等 文件 处 理 。 
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7.2.4 ”拦截 器 


拦截 器 主要 作用 于 给 请 求 添加 全 局 功能 ， 例 如 身份 验证 、 错 误 人 处理 等 ， 在 请 求 发 送 给 服 
务 器 之 前 或 服务 器 返回 时 对 request/response 进行 拦截 修改 ， 完 成 业务 逻辑 后 再 传递 给 下 
步骤 。Vue-resource 也 提供 了 拦截 器 的 具体 实现 方式 ， 例 如 : 














































































































Vue.http.interceptors.push (function(request, next) { 


// 修改 请 求 


request.method = 'POST'; 
// 继续 进入 下 一 个 拦截 器 
next (); 


Fy 























| 


也 可 以 对 返回 的 response 进行 处 理 : 





Vue.http.interceptors.push (function (request, next)f{ 
request.method = 'POST'; 
next (function(response) { 
// 修改 response 
response.body = '..." 

















或 者 直接 拦截 返 











互 














response， 并 不 向 后 端 发 送 请 求 : 








Vue.http.interceptors.push (function(request, next) { 
// body 可 自己 定义 ，request .respondWith 会 将 其 封装 成 response， 并 赋值 到 response.body 上 
next (request.respondWith (body, { 
statuss: 403, 
statusText: 'Not Allowed 
})); 
}); 





7.2.5 人 $resource 用 法 

















Vue-resource 提供 了 一 种 与 RESTful API 风格 所 匹配 的 写法 ， 通 过 全 局 变 旧 
resource 或 者 组 件 实例 中 的 this.$resource 对 某 个 符合 RESTful 格式 的 url 进行 封装 ， 使 得 
发 者 能 人 够 直接 使 用 增删 改 碍 等 基础 操作 ， 而 不 用 自己 再 额外 编写 撕 
我 们 先 大 致 说 明 下 RESTful API : 这 是 一 种 设计 风格 而 不 是 标准 ， 只 是 提供 了 一 组 设 































































































































































































1 和 约束 条 件 。 它 主要 用 于 客户 端 和 服务 器 交互 类 的 软件 。 基 于 这 个 风格 设计 的 软件 可 
以 更 简洁 ， 更 有 层次 ， 更 易于 实现 缓存 等 机 制 。 在 这 种 风格 中 ， 每 个 url 路 径 代 表 一 种 资源 
(resource )， 所 以 路 径 中 不 推荐 有 动词 ， 只 能 有 名 词 ， 而 且 所 用 的 名 词 往往 与 数据 库 的 表格 
名 对 应 ， 且 一 般 采 取 复 数 的 形式 命名 。 而 对 于 资源 的 具体 HTTP 动词 表示 ， 
即 GET/POST/PUT/PATCH/DELETE 等 。 
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ls 


我 们 以 产品 products 为 例 ， 设 计 出 的 api 即 为 。 
GET /api/products,: 获取 所 有 产品 列表 。 
POST /api/products : 新 建 



































肯定 产品 信息 。 
PUT /api/products/:id : 更 新 某 个 指定 产品 信息 。 


DELETE /api/products/:id : 删除 某 个 指定 产品 。 


GET /api/products/:id : 获取 某 个 十 





































































































Kl 
oo 





GET /api/products/:id/items : 获取 某 个 指定 产品 下 的 items 信息 列 寻 
在 需要 对 信息 进行 过 滤 的 情况 下 ， 以 query 参数 形式 进行 筛选 ， 例 如 



























































GET /api/products?1limit=10&offset=10&sortBy=name 


























简单 说 明 完 RESTful 后 ， 结 合 this.$resource， 我 们 可 以 使 用 与 后 端 接 口 对 接 : 























var products = this.$resource('/api/products{/id}'); 
// 相当 于 发 起 异步 GET 请 求 ， 访 问 /api/products/1 接口 ， 获 取 指 定 产品 信息 
products 

:et({ Ed 二 1}) 

.then (function(rep) { 








this.$set('products', rep.json()); 
}) 
// POST /api/products 参数 为 data， 新 建 一 个 产品 
products 
.Save ({}, data) 


.then (function (rep) { 


}) 





Vue-resource 提供 了 6 个 默认 动作 行为 ， 分 别 为 : 





get: {method: 'GET'}, 

save: {method: 'POST'}, 
query: {method: 'GET'}, 
update: {method: ‘PUT'}, 
remove: {method: 'DELETE'}, 
delete: {method: 'DELETE'"'} 








除了 默认 行为 外 ，Vue-resource 也 允许 我 们 自 定义 行为 ， 例 如 : 

















| 





Var customActions = { 
order : { method: 'POST', url : '/api/products{/id}/orders'} 
| 
var products = this.$resource('/api/products{/id}'); 
// 即 调用 异步 接口 POST /api/products/1/orders 


products 
.order({ id : 1}) 
.then (function(rep) { *…. }) 
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7.2.6 封装 Service 层 
， 我 们 通常 会 把 和 后 端 做 数据 交互 的 方法 封装 成 一 个 Service 模块 ， 
i， 将 Service 模块 集中 起 来 ， 并 按 资源 













































































在 编写 SPA 应 用 


















































供 不 同 的 组 件 进 行使 用 。 我 们 可 以 新 建 一 个 文件 夹 ap 
进行 分 类 。 
以 上 述 products 资源 为 例 : 











/api/products.js 
const API URL = 


export defauilt { 
produetId)y 1 


'/api/products; 


get (context, 
return context.$httpl(t 


url : API URL + '/' + productId, 


method : 'get' 
}); 


$y 
query(context, params) { 


return Context .Snhttp ({ 






































url 3 API URL; 
params : params 
} 
} 
} 
在 组 件 中 调用 方式 如 下 : 
' /api/productssjs"? 





import productsSsrv from 
{ 


var ProductDetail Vue.component ('product-detail', 


route : 1{ 
data function(transition) { 
productsSryv 


transition.to.params) 


.query (this, 
{ 


.then (function (rep) 




















)7.3 Vue-devtools 

在 开发 时 我 们 通常 需要 观察 组 件 实例 中 的 data 属性 的 状态 ,方便 进 行 调试 。 但 一 般 
象 上 ， 我 们 无 法 直接 访问 到 内 部 的 data 属性 ; 若 只 通过 

款 chrome 播 


组 件 实例 并 不 会 暴露 在 window 对 
debugger 或 console.log 方法 进行 调试 难免 太 过 低 效 。 所 以 Vue.js 官方 出 了 一 
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件 Vue-devtools， 它 可 以 在 chrome 的 开发 者 模式 下 直接 查看 当前 页 面 的 Vue 实例 的 组 件 结 
构 和 内 部 属性 ， 方 便 我 们 直接 观测 。 














I 













































































7.3.1 安装 方式 


可 以 通过 Chrome Web Store 直接 进行 安装 ， 地 址 为 : 









































https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglip 
ccpnnnanhbledajbpd 

















也 可 以 通过 源码 手动 安装 。 
1 ) 下 载 源码 : git clone https://github.com/vuejs/vue-devtools。 



































2 ) 进入 目录 : cd vue-devtools/。 
3 ) 安装 依赖 : npm install。 
4 ) 运行 生成 插件 : npm run build。 

5 ) 进入 chrome 插件 管理 页 面 : chrome://extensions/。 

6 ) 勾 选 “开发 老 fF“ 加 载 已 解压 的 扩展 程序 ”， 选 择 文件 安装 即 可 。 
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7.3.2 ”使 用 效果 





























在 Chrome 浏览 器 下 访问 Vue.js 应 用 , 打开 “开发 者 模式 ”， 会 发 现 多 了 一 个 Vue 的 栏 
目 ， 如 图 7-1 所 示 。 


” x 一 到 
[x 中 Elements Console Sources Network Timeline Profies Resources Security Audits En ©@1 


4 Instance selected: RouterApp 






































.Components A Vuex 



























































点 击 后 即 可 看 到 组 件 的 结构 和 组 件 实例 中 的 属性 ， 并 
子 组 件 实例 的 属性 ， 如 图 7-2 所 示 。 























下 








组件 内 的 子 组 件 也 可 以 获得 




















v <RouterApp> 


RouterApp © InspectDOM = 后 Sendto console 
v <Anonymous Component 
Native 
» <Description v $route: 0bject 
GroupList name: "teacher”" 
Rate * params; 0bject 
ALbumList path: "/teachers/1" 


» query: Object {empty) 








2 


男 外 ， 点 击 “send to console” 即 可 见 当 前 选中 组 件 的 $vm 赋值 
样 在 控制 台中 也 可 以 对 组 件 进行 修改 和 调试 。 





























到 window.$vm 上 ， 这 
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本 章 主 要 介绍 如 何 使 用 Vue.js 进行 实际 SPA 项 目的 开发 ， 包 括 使 用 Vue-router 和 
Vue-resource 进行 路 和 后 端 数据 交互 ， 以 及 webpack 和 vue-loader 进行 模块 化 开发 ， 
代码 编译 和 打包 ， 最 终 通过 自动 部 署 工 具 jenkins 来 对 项 目 进行 自动 化 部 署 。 


) 8.1 准备 工作 


在 本 章 中 ， 我 们 会 采用 ES6 的 语法 进行 开发 ， 并 使 用 vue-loader 和 webpack 进行 代码 
的 编译 ， 所 以 本 章 先 介绍 下 这 两 个 工具 的 使 用 方式 和 起 到 的 作用 。 
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8.1.1 webpack 























webpack 是 一 款 模块 加 载 及 处 理工 具 ， 它 




















能 把 各 种 资源 ,例如 JS( 含 JSX)、coffee、 
样式 ( 含 less/sass )、 图 片 等 都 作为 模块 来 使 用 和 人 处理 。 也 就 是 说 ，webpack 可 以 把 ES6 语 
法 的 js 文件 ，sass 样式 等 无 法 直接 在 浏览 器 中 使 用 的 语言 编译 成 浏览 器 支持 的 形式 ， 也 可 以 
巴 需 要 的 文件 进行 合并 、 压 缩 混淆 ， 如 图 8-1 所 示 。 
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时 回回 
是 图 图 


模块 及 其 依赖 webpack 芋 态 资源 


MODULE BUNDLER 











图 8-1 















































我 们 可 以 使 用 npm install webpack - g 的 方式 全 局 安装 webpack， 然 后 在 项 目 根 路 各 


和 


下 配 个 webpack.config.js 文件 ， 例 如 : 






































var HtmlWebpackPlugin = require('html-webpack-plugin') 
module.exports = { 
// 页 面 入 口 文件 配置 
entry: { 
index : './src/app.js' 
}, 
// 入 口 文件 输出 配置 
outputs ‘4 
path: './dist,，// 输出 目录 
filename: '[name].[hash].js' // 设置 输出 文件 名 字 ， 此 例 中 为 入 口 文件 名 字 加 上 
hash 值 。 使 用 hash 值 的 原因 是 生成 新 文件 后 避免 缓存 导致 用 户 没 有 更 新 到 新 的 js 文件 
}, 
module: { 
// 加 载 器 配置 
// 加 载 器 会 把 test 所 匹配 的 文件 加 入 loader 进行 处 理 
// 例如 下 面 的 babe1， 起 到 的 作用 就 是 将 匹配 到 的 js 文件 中 下 一 代 的 JavaScript ( 即 
使 用 ES2015 、es6 等 特性 的 JavaScript ) 编译 成 能 在 当前 浏览 器 环境 下 运行 的 js 代码 
loaders: [ 


test: 八 .js$/， // test 即 为 匹配 规则 ， 此 处 即 为 将 所 有 后 绥 为 .js 的 文件 加 载 进来 


loader: 'babel', // loader 即 为 处 理 器 ， 所 有 符合 规则 的 文件 会 交 由 loader 
进行 处 理 
exclude: /node modules/ // 


7 


// vue-loader 是 对 于 .vue 文件 专门 的 处 理 器 ， 能 将 .vue 文件 中 的 模板 、 样 式 、js 
代码 解析 并 编译 成 可 执行 的 代码 


test: /\.vue$/, 


loader: 'vue 





£ 
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}, 
// plugins 为 webpack 的 插件 功能 ， 可 利用 一 些 第 三 方 插件 完成 一 些 额外 的 操作 
// 例如 HtmlWebpackPlugin， 这 个 插件 可 以 帮助 生成 HTML 文件 ,在 body 元 素 中 使 用 
script 来 引用 output 中 最 后 输出 的 js 文件 
这 让 可 主 和 SS 站 
new HtmlWebpackPlugin({ 
filename: 'index.htmil', 
template: '‘'index.html', 
inject: true 
}) 
] 
}; 























总 结 一 下 的 话 ， 上 面 这 个 例子 的 人 
































I 





将 会 处 理 文 件 ./src/app.js， 将 其 所 包含 的 依赖 ( 
import 或 require 引入 的 其 他 js 和 .vue 文件 ) 文件 ， 将 其 中 的 ES6 语法 编译 成 浏览 器 能 运行 
的 JS 语法 ， 以 及 处 理 .vue 文件 中 的 模板 、 样 式 和 JS 代码 ， 最 后 将 其 合并 成 一 个 js 文件 ， 输 出 
到 output 中 设置 的 路 径 和 名 称 ， 最 后 通过 HtmlWebpackPlugin 揪 件 指定 的 index.html 模板 ,将 
这 个 文件 通过 script 形式 插入 到 <body> 中 ， 最 终生 成 静态 文件 index.html 和 app.[hashl.js 文 
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8.1.2 vue-loader 



































































































































vue-loader 是 webpack 的 一 个 loader 加 载 器 ， 用 于 处 理 我 们 编写 的 .vue 文件 。 在 早 
期 进行 组 件 化 编写 时 ， 我 们 往往 会 把 一 个 组 件 的 html、css、js 放 在 三 个 不 同 的 文件 中 ， 然 后 
利用 编译 工具 再 合 到 一 起 。 这 样 产 生 的 不 便 就 是 文件 过 多 ， 修改 一 个 组 件 需 要 打开 三 个 文件 ， 
























































发 的 过 程 中 经 常 需要 不 断 地 切换 视窗 。 然 而 vue-loader 的 出 现 ， 使 得 我 们 能 将 一 个 组 件 的 
html、css、js 放 在 一 个 文件 中 ， 用 不 同 的 标签 包 庄 住 即 可 。vue-loader 会 将 这 三 块 代码 分 别 
编译 成 可 执行 的 代码 。 


使 用 之 前 ， 需 要 先 按 照 vue-loader ， 以 及 所 需要 的 用 作 编 译 的 其 他 loader。 


ey 











































































































ar 






























































npm install \ 
webpack webpack-dev-server \ 
vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api \ 


babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 \ 
babel-runtime\ 


--save-dev 











我 们 可 以 这 样 编写 .vue 文件 














t 





<template> 
< 也 让 之 
<1i><a v-link="{ name : 'home'}"> 首 页 </a></1i> 
<1i><a v-link="{ name : '1list'}"> 和 列表 页 </a></1i> 
</ul> 
</template> 
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旦 实例 


<script type="text/ecmascript-6"> 


export d 
data ( 


efault { 
和 


return { 


} 
}s 


methods : { 



































































































































































































































































































































































































































































































































} 
} 
</script> 
<style> 
ul { 
display: tlex; 
} 
得 上 汪汪 二 
list-style: none; 
tlex:1; 
} 
</style> 
template 标签 中 的 即 为 该 组 件 的 DOM 结构 ， 上 默认 采用 HTML 形式 ,每 个 .vue 文件 
最 多 只 能 包含 一 个 template 标签 。 由 于 template 采用 的 模板 引擎 是 consolidate.js(https:// 
github.com/tj/consolidate.js)， 支 持 大 部 分 的 模板 语法 ,我们 可 以 通过 配置 template 的 lang 
属性 ， 使 用 不 同 的 模板 语法 ， 例 如 : 
<template lang="jade"> 
i 
由 主 
a(v-link="{ name : 'home' }") 首页 
1i 
a(v-link="{ name : 'list' }") 列表 页 
</template> 
script 标签 中 即 为 该 组 件 的 js 代码 ， 且 同 template 一 样 , 一 个 .vue 文件 中 最 多 只 能 包 
含 一 个 script 标签 ,而且 最 终 必须 输出 (export ) 一 个 符合 Vue.extend0 参数 规范 的 对 象 ， 
于 建立 Vue 组 件 构 建 器 。 例 如 上 例 中 export default 输出 的 对 和 象 。 
style 标签 即 为 该 组 件 的 CSS 代码 ， 同 个 vue 文件 中 可 以 包含 多 个 style 标签 。 除 了 直 
使 用 CSS 写法 外 ， 还 可 以 通过 配置 loader， 支 持 Sass 、less 等 样式 写法 。 另 外 还 有 一 个 
scoped 属性 ， 添 加 之 后 ，vue-loader 会 把 当前 同 .vue 文件 template 中 的 DOM 都 添加 一 个 
_Vy….. 的 属性 ， 并 把 style 中 的 样式 也 加 上 对 应 的 属性 选择 器 ， 使 得 这 部 分 样式 仅 在 当前 vue 的 
DOM 中 生效 。 这 个 方式 使 得 组 件 间 的 样式 不 会 互相 冲突 ， 也 不 需要 过 长 的 命名 来 维护 。 例 如 : 
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<style scoped> 


































































































































































































视 线 ”省 
display: flex; 
} 
也 下 主 天 
list-style: none; 
flex:1; 
} 
</style> 
<template> 
<ul> 
<1i><a v-link="{ name 'nome'}"> 首 页 </a></1i> 
<li><a v-link="{ name '1ist'}"> 列表 页 </a></1i> 
/LS 
</template> 
我 们 在 浏览 器 中 得 到 的 输出 的 样式 即 为 : 
v<style type="text/css 
ul[_v-5584bc67] { 
display: -webkit-box; 
display: -ms-flexbox; 
display: flex; 
} 
ul Li[_v-5584bc67] { 
list-style: none; 
-webkit-box-fLex:1; 
-ms-flex:1; 
flex:1; 
} 
/style 
HTML 结构 为 : 
Vv<ul _v-5584bc67 
Vv<\li _v-5584bc67 
a v-link="{ name : ‘home'}” _v-5584bc67> 首 页 </a 
Wu 
Vv<li _v-5584bc67 
a v-link="{ name : 'list'}"” _v-5584bc67> 列 表 页 </a 
/Li 
/ul 
) 8.2 ”目录 结构 
Vue.js 有 一 款 官方 的 脚手架 生成 工具 vue-cli， 可 以 通过 npm install - g vue-cli 进行 全 局 
安装 。 之 后 就 可 以 使 用 命令 vue init <template-name> <project-name> 进行 脚手架 的 安装 。 
vue-cli 总 共 提 供 了 5 种 脚手架 ( 即 可 使 用 的 <template-name>)， 分 别 如 下 。 
webpack: 基于 webpack 和 vue-loader 的 目录 结构 ， 而 且 支 持 热 部 署 、 代 码 检 查 、 测 
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斌 及 css 抽取 。 




















webpack-simple : 基于 webpack 和 vue-loader 的 目录 结构 。 


browerify: 基于 Browerfiy 和 vueify( 作 


代码 检查 及 单元 测试 。 





browerify-simple : 基于 Browerfiy 和 vu 
































二 


simple : 单个 引入 Vue.js 的 index.html 页 面 。 



































这 里 我 们 主要 会 使 用 webpack 作为 常 



































project 来 生成 项 目 。 如 图 8-2 所 示 。 





























] 脚 导 





EF 架 


localhost:Desktop GavinCLY$ vue init webpack my-project 


Target directory exists. Continue? 


localhost:Desktop GavinCLY$ vue init webpack my-project 


Project name 
Author 


Use ESLint to lint your code? 


Pick an ESLint preset 


Setup unit tests with Karma + Mocha? 
Setup eze tests with Nightwatch? 


vue-cli . Generated "my-project", 


To get started: 


cd my-project 
npm instal1 
npm run dev 


于 vue-loader 类 似 ) 的 结构 ， 支 持 热 部 署 、 


eify 的 结构 。 


， 可 以 运行 vue init webpack my 


Documentation can be found at https://vuejs-templates.github.io/webpack 


localhost:Desktop GavinCLY$ 


























区 











生成 的 目录 结构 如 














8=3 所 示 。 


CC my-project 


D build 
DD config 
CC src 

DD assets 


DD components 


App.vue 
国 mainjs 
static 
CS test 
DD e2e 
unit 
-babelrc 
.editorconfig 
-eslintignore 
.eslintrc.js 


DEDDD 


.gitignore 
四 index.html 
四 package.json 
四 README.md 

















8=3 
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build: 用 于 存放 webpack 相关 配置 和 脚本 。 
config: 主要 存放 配置 文件 ， 用 于 区 分 开发 环境 、 测 试 环境 、 线 上 环境 的 不 同 。 
src: 项 目 源码 及 需要 引用 的 资源 文件 。 





































































































































































































static: 不 需要 webpack 处 理 的 静态 资源 。 
test: 用 于 存放 测试 文件 。 
从 package.json 中 ,我 们 可 以 看 到 项 目 支持 的 命令 有 : 
藤本 = 生 人 生生 | 
"dev": "node build/dev-server.js"， // 开发 时 启动 的 servet 服务 
"build": "node puild/build.js", // 代码 编译 
"unit": "karma start test/unit/karma.conf.js --single-run"， // 运行 单元 测试 
"e2e": "node test/e2e/runner.js"， // 运行 e2e 测试 
"test": "npm run unit && npm run e2e", // 运行 单元 测试 和 e2e 测试 
"lint": "eslint --ext .js .vue src test/unit/specs test/e2e/specs" // 使 用 


eslint 进行 语法 检查 
} 









































正常 开发 时 ， 就 会 运行 命令 npm run dev， 启 动 一 个 小 型 的 express 服务 。 在 这 个 
express 服务 中 ， 会 使 用 nn 个 
! 间 件 ， 来 进行 项 目的 热 部 署 ， 即 每 次 修改 src 中 的 文件 后 ， 不 需要 再 按 浏 览 器 的 刷新 来 更 新 
代码 ， 启 动 的 server 服务 会 自动 监听 文件 的 变化 并 编译 ， 通 知 浏览 器 自动 刷新 。 


) 8.3 ”前 端 开发 


src 目录 里 面 就 是 我 们 主要 的 前 端 开 发 文件 ， 由 于 脚手架 采用 了 vue-loader， 就 可 以 把 
组 件 抽象 成 一 个 .vue 文件 ， 并 把 所 需 的 样式 和 DOM 结构 都 放 在 一 起 。 我 们 以 一 个 登录 实例 
来 展示 整体 的 开发 情况 。 

录 情 况 如 下 : 







































































































































































































































































































































































se 
六 一 一 components 


广 一 一 Main.vue 





-Login.vue 





广 一 一 main.Jjs 


广 一 一 index.html 








index.html 代码 如 下 : 


<!DOCTYPE html> 
htnl> 
<head> 





<meta charset="utf-8"> 
<title>my-project</title> 
</head> 
<body> 
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ls 


<div id="app"> 
<router-view></router-view> 
</div> 
</body> 
</html> 





./src/main.js 代码 如 下 : 





import Vue from 'vue 


// Vue .js 插件 
// 这 里 使 用 了 vue-router， 先 运行 npm install vue-router -save 进行 安装 


import VueRouter from 'vue-router' 

// 组 件 

import Main from './components/Main.vue' 
import Login from './components/Login.vue' 
Vue.use (VueRouter) 

Var router = new VueRouter({ 


} 


router.map(t{ 


ee 
name: "main'yv 
component: Main 
}， 
'/login': { 


name: 'login', 


component: Login 


}) 

var APP = Vue.extend ({ 

} 

router.start (App, '#app') 


components/Login.vue 
<template> 
<div class="login"> 
<div class="input-wrap"> 
<input type="text" v-model="name" /> 
<span v-if="error.name" class="err-msg">{{error.name}}</span> 
</div> 
<div class="input-wrap"> 
<input type="password" v-model="pwd" /> 
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<span v-if="error.pwd" class="err-msg">{{error.pwd}}</span> 
</div> 
<div class="input-wrap"> 
<button Qclick="login"> 提交 </button> 
</div> 
</div> 
</template> 


<SCript> 
export defauilt { 
data () { 
return 1{ 
name: '', 


DW Sy 


methods : { 
check (name, pwd) { 
if(!Iname) { 
this.error.name = ' 请 输入 姓名 '; 
return false; 
if(!pwd) { 
this.error.name = ' 请 输入 密码 '，; 
return false; 
} 
return truess 
}, 


login() { 
const { name, pwd, S$router} = this; 
if(!this.check (name, pwd)) return; 


if(name == 'admin' && pwd == 123) { 
$router.go({ name : 'main' }); 
} else { 


alert(' 用 户 名 密码 错误 ' ) ; 
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Ril 


</script> 


<style scoped lang="scss"> 


.login { 

width: 300px; margin:10% auto; 
} 
</style> 














[ 
































需要 注意 的 是 在 style 标签 中 使 用 了 lang=“scss” 这 样 的 属性 ， 也 就 说 此 处 的 写法 是 需 
要 符合 scss 规范 的 ， 而 且 我 们 需要 在 webpack 的 配置 中 加 上 sass 的 loader 用 来 编译 这 段 样 
式 。vue-cli 默认 的 配置 中 并 没有 安装 sass-loader ， 所 以 需要 自己 手动 安装 一 下 npm install 
sass-loader-dev-saveo 
在 build/webpack.base.conf.js 中 ，vue-loader 配置 了 所 有 的 CSS 的 loader 处 理 器 ， 
8-4 所 示 。 








上 
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8-4 
引用 的 是 build/utils 中 的 方法 ， 如 图 8-5 所 示 。 


















































options = options 0 


{ 
sourceLoader = loaders, 
extraParamChar 
( . (Loader)) { 
loader = Loader， { 
extraPparamChar 


loader = loader 
extraParamChar 


loader + (options.sourceMap ? extraParamChar 


(options.extract) { 
ExtractTextPlugin. ('vue-styl ader', sourceLoader) 


['vue-style-loar ， SourceLoader]. 有 二 


i 
css: 
postcss: 
less: 
EEEED 
scss: 
StyLuUS: 
styl: 



















































































所 以 如 果 用 的 是 其 他 CSS 预 处 理工 具 ， 也 只 需要 安装 不 同 的 预 处 理 loader 即 可 ， 基 本 不 
而 的 webpack 配置 。 



























































一 
SR 
沪 
| 
上 
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./src/components/main.vue 
<template> 
<div class="main"> 
<hiS>{{ meg +}</Ahl> 
</div> 
</template> 


<script> 
export defauilt { 
data () { 
return { 
msg: 'Welcome to the Vue.js' 


} 
</script> 


<style scoped lang="scss"> 
Ta Lr 
font-size: 14px; 
color: #58666e; 
background-color:#1c2b36; 
} 
< /Style 





























I 


这 样 一 个 基本 的 登录 校 验 及 跳 转 主页 面 的 功能 就 完成 了 ， 实 际 的 效果 与 url 路 径 如 下 。 


登录 页 面 如 图 8-6 所 示 。 


国 carotsoo 00n 
CR 


















































提交 





唤 





8=6 



































错误 提示 页 面 如 图 8-7 所 示 。 


ES ] localhost:8080/#!/login 





请 输入 姓名 





图 8-7 
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输入 admin、123 成 功 跳 转 ， 如 图 8-8 所 示 。 


) 8.4 











| 口 localhost:8080/#!/ 
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8-8 











后 端 联 调 











































































































































































































































































































在 正常 开发 中 ， 前 端 和 后 端 联 调 是 必 不 可 少 的 一 环 。 由 于 我 们 已 经 采用 前 后 端 分 离 的 方 
式 进行 开发 ， 所 以 也 就 不 需要 在 本 地 部 署 一 套 后 端 系统 了 。 通 常 可 以 直接 远程 调用 后 端的 数据 
接口 ( 比如 开发 环境 或 测试 环境 的 接口 )。 但 在 本 地 调试 时 ， 我 们 不 能 直接 在 前 端 页 面 中 访问 其 
他 ip 的 接口 ， 和 否则 会 有 路 域 的 问题 ， 所 以 一 般 也 会 在 本 地 启动 一 个 代理 服务 器 ， 拦 截 前 端 页 男 


的 异步 请 求 ， 从 本 地 服务 端 转发 到 远程 服务 器 ， 得 到 response 后 再 返回 给 前 端 页 面 。 
vue-cli 搭建 的 webpack 脚 





些 配置 ， 


















































































































































FF 架 中 就 包含 了 一 个 微型 的 代理 服务 器 ， 我 们 只 需要 进行 
就 可 以 在 本 地 调用 远程 服务 接口 ， 在 config/index.js 


LN 



























































Var path = require('path') 


module.exports = { 
BUT 二 
env: require('./prod.env'), 
index: path.resolve( dirname, '../dist/index.html'), 
assetsRoot: path.resolve( dirname, '../dist'), 


assetsSubDirectory: 'static', 
assetsPublicPath: '/', 
productionSourceMap: true, 
productionGzip: false, 
productionGzipExtensions: ['js', 'css'] 


dev: { 
env: require('./dev.env'), 
Dort: :8080, 


assetsSubDirectory: 'static', 
assetsPublicPath: '/', 
proxyTable: {}, 

cssSourceMap: false 
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8.4 后 端 联 调 











上 














方式 如 下 ; 

















dev 属性 

















的 proxyTable 就 是 服务 的 代理 








配置 项 ,使 




















proxyTable : { 


























apis { 
target: 'http://test.server.com'， // 远程 服务 域名 
changeOrigin: true, 
pathRewrite: { 
w/apis /api' 
} 
} 
} 
这 样 配 置 的 作用 相当 于 在 前 端 页 面 发 了 一 个 url 为 /api/users/1 的 异步 请 求 ， 代 理 服 





















































器 将 其 转发 到 了 http : 
域 的 问题 ， 也 实现 J 


的 express 服务 














uk 















































//test.server.com/api/users/l 
前 后 端 分 离 和 联 调 。proxyTab 
， 通 过 http-proxy-middleware 











| 


务 
上 ， 然 后 返回 数据 ， 这 样 就 不 会 出 现 跨 
le 最 终 会 传递 到 ./build/dev-server.js 
1 间 件 进行 使 用 ， 详 细 的 配置 说 明 可 以 访 














| 







































































































































































































































































间 https://github.com/chimurai/http-proxy-middleware 了 解 。 
配置 完 代理 服务 器 后 ， 我 们 就 可 以 使 用 vue-resource 来 进行 数据 请 求 了 。 通 常会 把 单个 
资源 的 数据 交互 抽象 成 一 个 模块 ， 添 加 到 文件 夹 api 中 ， 供 各 组 件 调 用 。 我 们 以 auth.js 为 例 ， 
于 处 理 用 户 登 录 注 册 等 方面 的 请 求 : 
上 一 一 Src 
| | 一 一 api 
| | 一 一 auth.Jjs 





./src/api/auth.js 代码 如 下 : 





const API URL = '/api/auth'; 


export defauilt { 


login (context, name, pwd) { 


return context.$httpl(t 


url : API URL + '/login', 
method : 'post', 
data: $f 

name, 

pwd 








然后 我 们 先 修改 main.js， 加 入 vue-resource : 





import VueResource from 'vue-res 


Vue.use (VueResource) 


OUTCe 




















然后 将 ./src/components/Login.vue 


1 的 login 方法 修改 为 : 
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import authSrv from './../api/auth.js'; // 引入 service 模块 


login() { 
const { name, pwd, S$router} = this; 
if(!this.check (name, pwd)) return; 


authSrv 
.login (this, name, pwd) 
.thenl(rep => { 
if(!rep.code) { 


$router.go({ name : 'main' }); 
} else { 
alert (' 用 户 名 密码 错误 '); 























需要 注意 的 是 ， 本 地 和 正式 上 线 的 后 端 接口 路 径 尽 量 保 持 一 致 ， 例 如 本 地 访问 http:// 
localhost/api/auth/login， 线 上 接口 的 地 址 最 好 也 是 http://prod.api.com/api/auth/login， 这 样 部 
署 上 线 后 不 需要 修改 /api 目录 下 模块 的 路 径 常量 ， 否 则 可 能 需要 nginx 等 服务 器 软件 做 代理 服务 。 


) 8.5 ”部 署 上 线 


项 目 本 地 开发 完成 后 ， 我 们 就 需要 将 代码 部 署 到 线 上 服务 器 。 在 此 之 前 ， 就 需要 把 这 
些 零 散 的 文件 打包 压缩 成 一 个 css 和 js 文件 ， 以 减少 HTTP 的 请 求 数 ， 避 免 额外 的 性 能 损 
耗 。 另 外 ,我 们 也 经 常会 用 到 版 里 工具 和 自动 化 部 署 工 具 ， 本 节 也 会 简单 介绍 下 gitlab 和 
jenkins 这 两 个 常用 的 开源 项 目 ， 便 于 搭建 自己 公司 的 代码 管理 工具 和 自动 化 部 署 平台 。 


8.5.1 生成 线 上 文件 


vue-cli 中 提供 了 代码 编译 、 人 合并、 压缩 的 脚本 build/build.js， 运 行 npm run build 后 我 
们 得 到 的 文件 ， 如 图 8-9 所 示 。 


v CG dist 
vw CS static 
vO css 
时 app.f696f80ae2bede3c453746ddccec4c17.css 
DB app.f696f80ae2bede3c453746ddccec4c17.css.map 
vjs 
时 app.28310fe6bc28ebc232bc.js 
DB app.28310fe6bc28ebc232bc.js.map 
四 manifest.fe2498bc18e84037bc84.js 
DB manifest.fe2498bc18e84037bc84.js.map 
国 vendor.8b52980flf6c6c6acfe4.js 
BD vendor.8b52980flf6c6c6acfe4.js.map 
index.html 























































































































































































































































































































































































































图 8-9 
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build.js 将 组 件 中 的 css 编译 合并 成 一 个 app.[hash].css 的 文件 ，js 则 在 合并 后 又 拆 解 成 
了 3 个 文件 ，app.[hash].js 包含 了 所 有 components 中 的 js 代码 ，vendor.[hash].js 包含 了 所 
有 引用 的 node_modules 中 的 代码 ， 而 mainfest.[hash].js 则 包含 了 webpack 运行 环境 及 模块 
化 所 需 的 js 代码 。 这 样 拆 分 的 好 处 是 ， 每 块 组 件 修改 重新 编译 后 不 影响 其 他 未 修改 的 js 文件 
的 hash 值 ， 这 样 能 够 最 大 限度 地 使 用 缓存 减少 HTTP 的 请 求 数 。 
8.5.2 nginx 

Nginx 是 一 款 轻 量 级 、 高 性 能 的 HTTP 和 反问 代理 服务 器 。 如 果实 际 情况 中 前 端的 静态 资源 
和 后 端 服务 需要 分 别 部 署 在 不 同 ip 的 服务 器 上 时 ， 我 们 就 可 以 使 用 nginx 配置 来 避免 跨 域 的 问题 。 

下 面 以 centos 为 例 ， 简 单 说 明 nginx 的 安装 和 配置 。 

Nginx 依赖 于 pcre，openssl，zlib 这 几 个 软件 ， 首 先 通过 yum 进行 安装 : 

yum install -y pcre pcre-devel 

yum install -~y zlib zlib-devel 

yum install -~-y openssl openssl-devel 

然后 从 nginx 官网 下 载 你 所 需要 版 本 的 压缩 包 。 

wget http://nginx.org/download/nginx-1.8.0.tar.gz 

解压 后 进入 目录 ， 并 进行 配置 编译 和 安装 

tar ZzZxvt TI9in=18 0 targ 

ed ginx=1 .8.0 

./configure 

make && make install 

这 样 就 安装 在 了 默认 路 径 /usr/local/nginx 下 ， 我 们 需要 修改 的 配置 文件 为 conf/vhost/ 
































1 的 #*conf 文件 ,ii 





过 配置 rewrite 方式 ; 











例如 ， 


将 打包 好 的 in 
































dex.html 放置 























domain.com 下 ， 





这 时 就 需要 进行 如 下 配 














告发 送 到 前 端 服务 器 上 的 数据 请 求 转发 到 后 端 服务 器 中 
到 www.domain.com 下 ， 而 后 端 服 务 则 在 域名 data. 














[e] 





server { 


listen 


server name 


80; 


www .domain.com; 


index index.html index.htm index.php; 


root /www 


POGatiDn 


proxy pass http://data.domain.com; 


domain.com/api/ 
} 


/ 


“Yap 人 下 


// index.html 放置 的 服务 器 目录 


配 所 有 以 www.domain.com/api/ 开 
// 实际 请 求 到 的 地 址 为 nttp://data. 





头 的 请 求 
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8.5.3 gitlab 


GitLab 是 基于 Ruby on Rails 的 一 个 开源 版 本 管理 系统 ， 实 现 一 个 自 托管 的 Git 项 目 仓 
库 。 我 们 可 以 在 自己 的 服务 器 上 搭建 一 套 Gitlab 系统 ， 便 于 公司 的 代码 管理 。 


Fo 




















































































































Gitlab 可 以 通过 官网 https://about.gitlab.com/downloads/， 选 择 所 需 的 服务 器 版 本 ， 
然后 根据 提供 的 安装 步 又 进行 安装 ， 如 图 8-10 所 示 。 























A GitLab 


Download GitLab Community Edition (CE) 


Install a GitLab CE Omnibus package on 


Select Operating System ~ 





网 


8-10 
安装 好 后 可 以 通过 提供 的 管理 员 账号 进行 登录 ，Gitlab 的 使 用 方式 和 Github 类 似 ， 我 们 

































































个 git， 如 图 8-11 所 示 。 





可 以 为 项 目的 前 端 项 目 工 程 新 如 























Ba + 0 


Dashboard 
主 Pushoweres Magemwants Commants Teem DD acthvtty Foad 
Fter by name New project 

= 3 days ago -EE > 

cc262sac acc logz dr 

"a 

”> 
和 9 

5c?5e89c a loge dr 





ud 54 Mory commils. Compere 9s9776dl..3ca256Sb 











中 


8-11 
一 般 来 说 ，git 项 目 会 分 成 master 、develop 、feature、hotfix 这 几 种 分 支 关 型 ; 
mater 为 主 分 支 ， 主 要 用 于 发 布 ， 代 码 永远 处 于 稳定 可 产品 化 发 布 的 状态 。 
develop 为 开发 分 支 ， 主 要 记录 开发 状态 下 相对 稳定 的 版 本 。 
feature 为 功能 分 支 ， 从 develop 上 拉 取 代码 ， 开 发 完成 后 再 合并 到 develop 分 支 上 。 经 
于 一 个 大 版 本 develop 拆 分 成 几 个 feature 的 场景 ,便于 多 个 开发 人 员 在 同一 版 本 迫 代 中 
开发 各 自 不 同 的 功能 点 ， 避 免 代码 冲突 ， 在 开发 完成 后 再 合并 到 develop 分 支 中 进行 测试 。 
hotfix 为 紧急 线 上 修复 分 支 ， 需要 从 master 上 拉 取 分 支 进行 bug 修复， 修复 完成 后 分 
别 并 入 master 和 develop 分 支 。 
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8.5 部 署 上 线 


8.5.4 jenkins 


Jenkins 是 一 个 开源 的 持续 集成 系统 ， 方 便 开 发 者 利用 图 形 界 面 进行 项 目 部 署 发 布 等 固定 
操作 ， 通 常 也 会 和 Gitlab 配合 起 来 ,在 git push 完成 后 触发 设 定 好 的 操作 ， 例 如 将 代码 部 署 
到 某 个 开发 环境 中 。 

Jenkins 本 身 是 用 Java 开发 的 ， 需 要 jdk 的 环境 ， 再 从 http://mirrors.jenkins-ci.org/ 
war/latest/jenkins.war 下 载 最 新 的 war 包 ， 然 后 解压 到 某 个 固定 目录 就 算 安 装 完 成 了 ， 非 
党 方便。 直接 使 用 命令 行 java -jar jenkins.war 即 可 ， 如 果 要 以 后 台 进 程 的 方式 启动 ， 改 成 
nohup java -jar jenkins.war & 即 可 ， 启 动 过 程 中 ， 它 会 将 war 包 解 压 到 ~/.jenkins 目录 下 ， 


并 生成 一 些 目录 及 配置 文件 ， 如 图 8-12 所 示 。 







































































































































































































































































































































































篇 Jenkins 

二 蜀 亚 加 刘 葬 

起 All 

也 5 W Name | 上 次 成 功 上 次 寺 赂 上 次 掉 坡 时间 

~ mm——_ 1 能 

起 mm Sm 25 day E 

条 cn mm—— 下 [5 

me” | t 局 

uf J 下 -时 t 全 





图 8-12 
Jenkins 中 以 “Job” 作 为 任务 单位 ， 我 们 可 以 通过 新 建 Job 进行 配置 ， 如 



































8-13 所 示 。 





区 






































General 





哆 








8-13 
General: 主要 包含 了 Job 的 基本 信息 配置 ， 例 如 项 目 名 称 、 描 述 等 属 












































8-14 所 示 。 





生 ， 如 





嵌 
一 

到 
加 












































Throllle buik 于 


的 构建 和 





Label Expression develop 


Labal is serviced by 1 node 


图 8-14 
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源码 管理 : 可 以 和 git 配合 使 用 ， ] 于 jenkins 拉 取 源码 ， 如 图 8-15 所 示 。 
源码 管理 
None 
©aGit 
Repositories © 
Repository URL mm ct 0) 
Credentials 一 3 上 Add 
高 级 .… 
Add Repository 
Branches to build EE 
Branch Specifier (blank for any) Geass 加 
Add Branch 
源码 库 浏览 器 (自动 ) :© 
Additional Behaviours Add = 
图 8-15 


























Hr 























构建 触发 器 ， 在 git 





























构建 触发 器 : 对 于 在 开发 环境 经 常 需要 发 布 的 项 目 来 说 ， 可 以 使 
push 后 自动 部 署 到 开发 服务 器 上 ， 如 图 8-16 所 示 。 















































构建 触发 器 





触发 远程 构建 (例如 ,使 用 脚本 ) 图 
Build after other projects are built [3 
Build periodically (3 
Build when a change is pushed to GitHub [2) 
Build when a change is pushed to GitLab. GitLab Cl Service URL: http /boss-dev-admin-plan-api [3] 

Build on Merge Request Events 
Build on Push Events 
Rebuild open Merge Requests Never $ 
Enable [ci-skip] 
Set build description to build cause (eg. Merge request or Git Push ) 
Add note with build status on merge requests 
Vote added to note with build status on merge requests 
Accept merge request on success 
© Allow all branches to trigger this job 回 

Filter branches by name 加 

Filter branches by regex 回 

图 8-16 























在 GitLab 中 配置 Jenkins 中 提供 的 GitLab CI Service URL， 即 可 在 分 支 push 的 时 候 
就 执行 该 Job ， 如 图 8-17 所 示 。 


cu 
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8.5 部 署 上 线 


es Q 


GitLab CI 
Cortinuous Integration server from GitLab 


— to services 


Active 
Trigger ”加 Push events 
Thle url Wi be riggered by a Ptiah to the reposiscory 
加 Tog push events 
This url will be triggered when a new tag is pushed to the repository 
Token 
Project url 
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8=17 











构建 环境 : 对 jenkins 所 在 的 服务 器 上 的 环境 做 相应 的 配置 ， 如 图 8-18 所 示 。 


























构建 环境 
Delete workspace before build starts 
Send files or execute commands over SSH before the build starts 回 
Send files or execute commands over SSH after the build runs 回 


_ Abort the build if it's stuck 
Add timestamps to the Console Output 
Execute shell script on remote host using ssh ©@ 
Provide Node & npm bin/ folder to PATH 
SSH Agent 
Use secret text(s) or file(s) 加 





图 8-18 




















构建 : 执行 shell 脚本 ， 例 如 进行 npm run build 的 编译 行为 ， 将 源码 编译 成 最 终 可 执 




















的 文件 ， 并 进行 压缩 合并 及 发 布 到 线 上 服务 器 。 



























































构建 后 操作 :整个 任务 部 署 完成 后 可 进行 的 操作 ， 在 这 里 可 以 配置 邮件 通知 等 行为 。 



































行 








] 月 
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压缩 等 步骤， 本 地 开发 时 与 后 端的 联 调 以 及 开发 完成 后 自动 化 部 署 和 服务 器 配置 等 。 这 些 步 
所 涉及 的 webpack 、nginx、gitlab、jenkins 等 工具 的 配备 ， 虽 然 不 是 前 端 必须 所 掌握 的 






































本 章 主要 介绍 了 Vue.js 在 实际 项 目 中 的 目录 结构 及 应 用 ， 正 式 上 线 所 需 的 编译 、 合 



































































































































但 对 于 设计 整体 的 前 端 解决 方案 来 说 却 是 必 不 可 少 的 环节 。 前 端 开发 者 也 会 逐渐 从 最 初 























滞 囊 





























i 编写 、js 特效 等 方面 成 长 为 整体 解决 方案 的 提供 者 。 


I 

















异步 社区 会 员 123456(1429595365@qq.com) 专 享 尊重 版 权 





技 
的 


129 




































































在 一 些 大 型 应 用 中 ， 有 时 我 们 会 遇 到 单 页 面 中 包含 着 大 量 的 组 件 及 复杂 的 数据 结构 ， 而 



















































































可 LU 和 各自 的 状态 ， 在 这 种 情况 下 组 件 树 中 的 事件 流 会 很 快 变 得 非常 复 
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降低 这 种 情况 下 










































































































































































设计 的 状态 管理 架构 。 本 章 主要 介绍 Vuex 的 基本 用 法 和 一 些 使 用 场景 。 


) 9.1 概述 



































， 也 使 调试 变 得 异常 困难 。 为 了 解决 这 种 情况 ， 我 们 往往 会 引入 状态 管理 这 种 设计 模式 ,来 
事件 的 复杂 程度 并 且 使 调试 变 得 可 以 追踪 。 而 Vuex 就 是 一 个 专门 给 为 Vue.js 
看 





Ir 











Vuex 是 状态 管理 模式 的 一 种 实现 库 ， 主 要 以 搬 件 的 形式 和 Vue.js 进行 配合 使 用 ， 


册 
加 
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ta 对 
件 的 
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使 我 们 在 Vue.js 中 管理 复杂 的 组 件 事件 流 。 

通常 情况 下 ， 每 个 组 件 都 会 拥有 自己 的 状态 ， 也 可 以 理解 成 自身 实例 中 的 da 
象 。 用 户 在 操作 的 过 程 中 ， 会 通过 一 些 交 互 行为 ， 例 如 点 击 、 输 入 、 拖 动 等 修改 组 
状态 ， 而 此 时 往往 需要 将 用 户 引 起 的 状态 变化 通知 到 其 他 相关 组 件 ， 让 他 们 也 进行 
的 修改 。 由 于 Vue.js 本 身 的 事件 流 是 依赖 于 DOM 结构 的 ， 组件 修 改 状态 后 需要 2 

系列 冒 泡 才能 达到 顶部 的 组 件 ， 而 且 如 果 需 要 修改 兄弟 组 件 的 状态 还 需要 共同 的 父 组 

件 再 进行 一 次 广播 。 这 种 方式 无 疑 是 低 效 而 且 不 易 维护 的 ， 我 们 也 很 难 去 追踪 事件 
走向 。 

Vuex 则 提供 了 一 个 集中 式 的 事件 流通 道 ， 类 似 于 第 6 章 中 提 到 的 在 Vue.js 2.0 中 提供 的 
var bus = new Vue0， 统 一 管理 组 件 的 事件 流 。 具 体 的 流程 如 图 9-1 所 示 。 
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9.2 简单 实例 


vue 组 件 ( 树 ) M i 1 | 开发 工具 




















) 9.2 简单 实例 


将 借用 一 个 简单 的 实例 来 讲述 Vuex 的 基础 用 法 ， 并 对 其 中 的 核心 概念 Store ( 
库 ) 、State (状态 )、Mutations (变更 )、Actions (动作 ) 做 进一步 的 说 明 。 

在 本 例 中 ， 我 们 会 实现 一 个 列表 的 管理 机 制 ， 主 要 包括 列表 元 素 的 增加 和 删除 。 本 节 代 
码 会 采用 ES6 的 语法 进行 说 明 。 
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9.2.1 ”所 需 组 件 























首先 建立 一 个 根 组 件 ， 路 径 为 components/App.vue。 该 组 件 包含 两 个 子 组 件 ，Side 组 
件 用 于 控制 列表 元 素 的 增加 和 删除 ，Content 组 件 则 用 于 展示 列表 元 素 的 内 容 。 



























































<template> 
<div id="app"> 
<side></side> 
<content></content> 
</div> 
</template> 


<SCript> 
import Side from !./Side.vue' 
import Content from './Content.vue' 
export default { 
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components : { 
Side, 


Content 


} 
</script> 





WT 





创建 Side 子 组 伯 





,Components/Side.vue。 





<template> 
<ul class="side list-unstyled"> 
<1i> 增加 </1i> 
<1i> 删除 </1i> 
</ul> 
</template> 











创建 Content 子 组 件 ，components/Content.vue。 





<template> 
<div class="content"> 
<div class="item" v-for="item in items"> 
{{ item.content }} 
</div> 
</div> 
</template> 





9.2.2 创建 并 注入 store 





























传统 方式 下 ， 如 果 需 要 通过 Side 组 件 去 添加 Content 组 件 中 的 item， 只 能 依赖 于 根 组 









































件 App 来 进行 事件 的 监听 和 广播 ， 这 样 既 增加 了 耦合 度 ， 也 使 得 Side 组 件 和 Content 组 件 无 


法 独立 复 用 。 


























将 存储 元 素 的 列表 。 
















































































E 会 增加 Store 这 个 概念 ， 用 于 存储 整个 应 用 所 需 的 信息 ， 本 例 





而 在 Vuex 中 ， 我 们 症 
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首先 ， 我 们 可 以 用 npm 先 安装 Vuex。 














npm install --save vuex 








建立 一 个 新 文件 vuex/store.js， 代 码 如 下 : 





import Vue from 'vue' 


import Vuex from '‘'vuex' 
Vue.use (Vuex) 


// 创建 一 个 对 象 来 保存 应 用 启动 时 的 初始 状态 


const state = { 


异步 社区 会 员 123456(1429595365@qq.com) 专 享 尊重 版 权 


9.2 简单 实例 





items: []， // items 为 元 素 列表 ， 
name : " // 应 用 名 称 


// 用 于 更 改 状态 的 mutation 函数 


const mutations = { 


}; 


export default new Vuex.Store (1{ 
state, 


mutations 


) 
创建 好 store 后 ， 需 要 将 其 注入 到 我 们 的 应 用 中 ， 新 建文 件 app.js， 引 入 Vue,Vuex 及 
根 组 件 App.vue。 










































































import Vue from 'vue 
import store from './vuex/store' 


import App from './components/App.vue' 


new Vue ({ 
store, 
el: 'body', 
components: { App } 
} 





9.2.3 创建 action 及 组 件 调用 方式 














action 能 够 通过 分 发 ( dispatch )， 调 用 对 应 的 mutation 函数 ， 来 触发 对 store 的 更 新 。 
我 们 在 相同 目录 下 建立 vuex/actions.js。 






























































export const addIitem = ({ dispatch, store }, item) => { 
dispatch ('ADD ITEM', item); 


export const deleteItem = ({ dispatch, store}) => { 
dispatch ('DELETE ITEM'); 
} 


action 消 数 也 可 以 通过 异步 请 求 向 后 端 获取 数据 ， 或 读 取 store 中 其 他 的 相关 数据 后 上 
进行 分 发 。 例 如 : 


export const getDataFromServer = ({ dispatch, store}) => { 


// 这 里 只 是 进行 一 个 说 明 ， 你 需要 自己 引入 所 需 的 异步 请 求 方法 





























































































































$.ajax( 
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url : '/api/data', 
success : function(data) { 
diapatch('FETCH DATA'; data); 


}) 
} 


_ Vuex 中 ,组件 不 会 直接 修改 store 对 象 或 者 自身 的 状态 ， 都 是 通过 action 的 方法 来 
分 发 。 下 面 就 来 修改 component/Side.vue 文件 ， 使 之 能 调用 action 的 方法 。 
// 修改 template， 为 增加 、 删 除 两 个 按键 添加 事件 


<ul class="side list-unstyled"> 
<1i @click="addItem({ content : Math.random()})"> 增 加 </1i> 




































































































































































<1i @click="deleteItem()"> 删除 </1i> 
</ul> 


<script> 
import { addItem } from '../vuex/actions' 


export defauilt { 
data() { 
return { 
} 
} 
vuex: { 
actions: { 
addItem, 
deleteItem 


} 
</script> 


于 之 前 已 经 注入 了 store， 所 以 在 子 组 件 中 ， 我 们 多 了 一 个 新 的 选项 vuex。 它 可 以 包 
含 一 个 actions 属性 ， 并 将 actions.js 定义 的 方法 赋值 进去 ， 同 时 可 以 用 于 事件 绑 定 。 
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三 
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9.2.4 创建 mutation 


action 分 发 后 就 由 mutation 来 对 store 进行 更 新 。 需 要 修改 之 前 的 vuex/store.js 文件 ， 






















































































补 全 在 vuex/actions.js 中 对 应 的 两 种 行为 。 
const mutations = { 
ADD ITEM (state, item) 


state.items.push(item); 


}, 
DELETE ITEM (state) { 
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9.2 简单 实例 





state.items.pop(); 


}; 





四 














对 比 actions.js 中 的 方法 和 mnutations， 可 以 看 出 action 在 调动 dispatch 的 时 人 
准确 地 传 入 action 的 名 称 ， 并 且 需 要 和 mutations 对 象 中 的 属性 保持 一 致 。 由 于 动作 名 称 往 
往 为 常量 ， 所 以 我 们 习惯 用 大 写 的 形式 来 命名 。 在 大 型 项 ， 也 会 单独 把 动作 名 称 集合 
成 一 个 模块 ， 单 独 管 理 ， 例 如 抽象 成 vuex/mutation-type.js。 
























































































































































































































































export defauilt { 
ADD ITEM : 'ADD ITEM', 
DELETE ITEM : 'DELETE ITEM" 





} 





vuex/actions.js 即 可 修改 为 : 





import { ADD ITEM } from './mutation-type.js' 


export const addIitem = ({ dispatch, store }, item) => { 
dispatch (ADD ITEM, item); 














vuex/store.js 中 的 mutations 可 修改 为 : 











import { ADD ITEM } from './mutation-type.js' 


const mutations = { 
[ADD ITEM] (state, item) { 















































组 件 中 的 vuex 选项 除了 actions 属性 外 ， 还 有 一 个 getters 属性 ， 里 面 可 以 定义 函数 ， 
接受 的 参数 即 为 vuex/store.js 中 定义 的 state 对 象 。 


修改 components/Content.vue 如 下 : 






























































人 





export aqefault { 


vuex: 1 
getters: { 
// 这 里 采用 的 ES6 的 写法 ， 你 可 以 替换 成 
// items : function(state) { return state.items } 


items: state => state.items 
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这 样 我 们 在 这 个 组 件 实例 中 就 获得 了 state 中 的 items 数组 ， 在 template 中 就 可 以 直 提 

















使 用 <li v-for=“item in items”></Wli> 来 遍历 数据 。 
除了 在 组 件 中 直接 声明 getters 函数 外 ， 也 可 以 将 其 抽象 成 一 个 模块 。 例 如 ， 新 建 一 个 


uex/getters.js : 







































































Wm 























到 





export function getItems (state) { 
return state.items; 
} 





components/Content.vue 即 可 修改 成 : 





import { getItems } from '../vuex/getters'; 


export defauilt { 


vuex: { 
getters: { 
items: getIitems 
} 




































































rs 的 使 用 并 不 是 强制 规定 ， 只 是 一 种 最 佳 实践 。 特 别 是 对 于 大 型 应 用 来 说 ， 很 多 组 
件 可 以 共用 getters 方法 ,这样 state 中 的 值 如 果 发 生 了 变化 ， 也 只 需要 修改 一 个 getter 方法 

































































































































































以 上 就 是 vuex 所 涉及 的 所 有 对 象 及 使 用 方法 ， 最 终结 果 为 : 


增加 0.6732773172110129 
删除 


0.5368967656957893 


0.7304434973765515 





“删除 ” 则 去 除数 组 最 后 一 个 随机 数 。 我 们 可 








Ei 


单 击 “增加 ” 即 可 新 增 一 行 随机 数 ， 单 了 
以 从 用 户 使 用 的 角度 来 总 结 一 下 整体 的 流程 。 
1 ) 操作 组 件 : 单 击 组件 按 钮 ， 调 用 组 件 中 获取 的 action 函数 。 

2 ) action dispatch : action 函数 不 会 直接 对 store 数据 进行 修改 ， 而 是 通过 dispatch 的 
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9.4 中 间 件 














方式 通知 到 对 应 的 mutation。 
3 ) mutation : mutation 函数 则 包含 了 对 store 数据 的 具体 修改 内 容 。 

4 ) store/state : store 是 包含 当前 state 的 单一 对 象 ， 数 据 更 新 后 ， 自 动 通知 到 getter 函数 。 
5 ) getter : getter 函数 从 store 获取 组 件 所 需 的 数据 。 
6 ) 组 件 展示 : 组 件 中 使 用 getter 函数 ， 获 取 新 的 数据 ， 进 行 展 示 。 
上 述 例子 只 是 为 了 展示 vuex 的 基础 



























































































































































































































































法 ， 实 际 开发 中 我 们 不 会 为 了 维护 一 个 数组 而 采取 
这 么 多 步 又 。 在 第 7.4 节 中 ， 我 们 会 在 这 个 例子 的 基础 上 进行 修改 ， 开 发 一 个 简易 的 HTML5 
页 面 编辑 器 。 




















) 9.3 ”严格 模式 


Vuex.store 具有 严格 模式 ， 即 当 Vuex State 在 mutation 函数 之 外 的 情况 下 被 修改 时 ， 
即 会 抛 出 错误 。 我 们 可 以 在 创建 实例 时 传 入 strict:true 参数 ， 即 可 开启 严格 模式 : 

































































Const store = new Vuex.Store ({ 
/fe. 
strict ; true 

} 


需要 注意 的 是 ， 不 要 在 生产 环境 中 开启 严格 模式 。 严 格 模式 会 对 state 树 进行 一 个 深入 观 
察 ， 会 造成 额外 的 性 能 损耗 ， 所 以 可 以 将 上 述 例子 修改 为 ; 






























































const store = new Vuex.Store (1{ 
strict : process.env.NODE ENV !== 'production' 


}) 





) 9.4 ”中 间 件 


Vuex store 接受 middlewars 选项 来 加 载 中 间 件 ， 例 如 : 




















const store = new Vuex.Storel(t{ 
middlewares : [myMiddleware] 


}) 








myMiddleware 是 一 个 对 象 ， 可 以 包含 设 定好 的 钩子 函数 ， 例 如 : 








const myMiddleware = { 
onInit (state) { 
// 在 初始 化 的 时 候 被 调用 ， 可 以 记录 初始 state 
console.log(state); 
}, 
onMutation(mutation, state) { 
// 每 个 mutation 之 后 都 会 调用 
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// 每 个 mutation 参数 格式 为 { type, payload} 
console.log (mutation, state); 


} 


我 们 可 以 在 第 9.2 市 的 例子 中 加 一 个 中 间作 








T 




















， 并 进行 增加 和 删除 操作 ， 观 察 输出 的 结果 为 : 





1 





























> Object {type: "ADD_ITEM", payload: Array[1]} 
pObject {_ob__: Observer} 

> Object {type: "DELETE_ITEM", payload: Array[8]} 
pObject {_ob__: Observer} 
























































payload 即 为 mutations 定义 的 ADD_ITEM (state，item ) 中 除了 state 外 的 后 面 所 有 
参数 的 数组 。 
94.1 快照 
可 以 在 中 间 件 内 设置 获取 state 的 快照 ， 用 来 比较 mutation 执行 前 后 的 state。 只 需 在 




































































设 间 件 对 象 的 时 候 新 增 snapshot 选项 及 onMutation 钩子 函数 。 
































const mySnap = { 
snapshot: true, 
onMutation (mutation, nextState, prevSstate) { 
// nextState 和 prevState 分 别 为 mutation 触发 前 和 触发 后 对 原 state 对 象 的 深 拷贝 


} 
同 严格 模式 一 样 ， 快 照 模式 也 建议 只 在 开发 模式 下 使 用 ， 处 理 方式 与 严格 模式 类 似 : 






























































const store = new Vuex.storel(t{ 


//*. 
middlewares : process.env.NODE ENV !== 'production' ? [mySnap] : [] 


}) 





9.4.2 logger 


















































为 了 方便 调试 和 观察 数据 变化 ，Vuex 自 带 了 一 个 logger 中 间 件 ， 使 用 方法 如 下 : 














// 使 用 的 vuex 版 本 是 0.82 


import createLogger from 'vuex/logger'; 


const store = new Vuex.Storel(t{ 
middlewares : [createLogger () ] 


}) 
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在 调用 action 后 ， 我 们 可 以 在 控制 台 看 到 logger 中 间 件 输出 的 内 容 ， 记 录 了 mutation 
的 type 和 调用 时 间 ， 以 及 state 的 变化 过 程 : 


















































TY mutation ADD_ITEM @ 20:32:42.432 buiLd.ijs:26372 
Prev state y Object {items: Array[8]} build.is:20377 
mutation buitd.ijs:26378 
= Object {type: "ADD_ITEM", payload: Array[1]} 
next state p Object {items: Array[1]} build.1is:28379 





createLogger 有 以 下 几 个 选项 可 供 配 置 。 

1 ) collapsed : 默认 为 true， 于 是 否 自动 展开 输出 的 mutations。 

2 ) transformer : 类 型 为 函 数 ， 接受 state 为 于 限定 在 控制 台 输 出 的 部 分 
state。 由 于 在 大 型 应 用 中 state 通常 会 比较 复杂 ， 如 果 都 直接 输出 到 控制 台 会 显得 比较 杂乱 ， 
所 以 可 以 用 transformer 进行 控制 。 
3 ) mutationTransformer : 类 型 为 函数 ， 接 受 mutation 为 参数 ， 返 回 值 即 为 控制 台 
输出 的 mutation。 默 认为 { type :“”,，payload :“”}， 我 们 也 可 以 通过 设 定 其 返 匠 
对 控制 台 的 输出 进行 自 定义 。 例 如 ， 我 们 可 以 设置 返回 值 为 return mutation.type， 这 样 在 ] 
制 台 中 仅 会 输出 mutation.type 的 值 ， 而 不 输出 mutation.payload 

createLogger 使 用 选项 的 具体 示例 如 下 : 
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import createLogger from 'vuex/logger'; 


const logger = createLogger({ 
collapsed: false, 
transformer (state) { 
return state.items 
}, 
mutationTransformer (mutation) { 


return mutation.type 


}) 


Const store = new Vuex.Storelt{ 
middlewares : [logger] 
}) 





) 9.5 ”表单 处 理 


在 Vuex 的 模式 下 ， 组 件 中 的 表单 处 理会 稍 显 不 同 ， 因 为 表单 “天 然 ” 的 作用 就 是 直 砷 
修改 组 件 内 状态 ， 这 和 Vuex 的 action 一 mutation 一 state 的 修改 方式 显然 并 不 符合 。 特 别 
是 在 严格 模式 下 。 我 们 将 第 9.2 节 中 的 components/content.vue 修改 为 : 
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<template> 
<div class="content"> 
<div class="item" v-for="item in items"> 
<input type="text" v-model="item.content" /> 
</div> 
</div> 
</template> 



















































































在 用 户 输入 时 ， 就 相当 于 直接 修改 state 状态 。 而 由 于 这 个 修改 并 不 是 在 mutation 中 执 
行 的 ， 此 时 vuex 就 会 抛 出 一 个 警告 : 











(2 bp [Vue warn]: Error when evaluating setter "item.content": Error: [vuex] build.is:9271 
Do not mutate vuex store state outside mutation handlers. (found in component: <content>) 


> 




















为 了 避免 这 种 情况 ， 也 为 了 能 够 更 好 地 跟踪 state 状态 ， 我 们 会 把 表单 元 素 绑 定 state 的 
值 ， 并 在 change 或 者 blur 事件 中 监听 action 行为 ， 不 推荐 使 用 input， 这 样 每 次 输入 都 会 触 
发 action， 对 性 能 消耗 较 大 。 例 如 : 





























fl 
















































































荆 

















<input :value="item.content" Qchange="updateContent ($index, S$event. 
target.value)™" > 

// components/content.vue 的 js 修改 为 : 

import { updateContent } from '../vuex/actions' 


export defauilt { 
vuex: { 
getters: { 
items: state => state.items 
5 
actions:: 才 
updateContent 


} 
// vuex/actions.js 中 增加 updateContent 方法 
export const updateContent = ({ dispatch }, index, value) => { 
dispatch ('UPDATE CONTENT', index, value) 
} 
// vuex/store.js 中 增加 mutations 的 UPDATE CONTENT 属性 : 
const mutations = { 
// 
UPDATE CONTENT (state, index, value) { 
// 需要 注意 的 是 ， 我 们 在 本 例 中 修改 的 是 items 数组 对 象 中 content 的 值 
// 如 果 直 接 写 成 state.items [index] .content = value，vue 是 无 法 监听 到 数值 变化 的 
// 也 就 无 法 更 新 视图 上 的 content 值 ， 所 以 此 处 用 $set 方式 更 新 数据 
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state.items.$set (index, { content : value }); 


}; 





al 














当然 ， 如 果 你 觉得 没有 必要 跟踪 item.content 的 值 ， 也 可 以 不 将 此 内 容 放 入 Vuex 中 ， 
完全 当做 组 件 的 本 地 状态 。 一 般 和 其 他 组 件 不 产生 影响 的 状态 就 可 以 这 么 处 理 。 
此 外 ， 如 果 希 望 使 用 状态 管理 ， 又 想 继续 使 用 v-model， 则 可 以 通过 Vue.js 的 计算 忆 
实现 : 





























































































































al 
储 
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ul 











// 修改 components/content.vue 
<div class="content"> 
<input type="text" v-model="appName"> 


</div> 
import { updateContent, updateName } from '../vuex/actions' 
export defauilt { 
vuex: { 
getters: { 
name : state => state.name 
}, 
actions: { 
-4 os, 
updateName 
} 
}, 
computed: { 
appName: { 
get() 1 
return this.name; 
二 
set (val) I 
this.updateName (val); 


} 

// 修改 vuex/actions.js 

export const updateName = ({ dispatch }, name) => { 
dispatch ('UPDATE NAME', name); 

} 

// 修改 vuex/store.js 

const mutations = { 
// 
UPDATE NAME (state, value) ({ 


state.name = value; 
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}; 


状态 管理 : Vuex 


更 





我 们 在 input 中 输入 内 容 的 时 候 就 进行 了 state 的 玫 


I 4 























mutation UPDATE_NAME @ 10:16:45.793 




































































































































































新 [， 





从 logger 中 可 以 看 到 : 











build.is:19989 













































































































































































prev state yp object {items: Array[8], name: ""} build.1is:19094 

mutation UPDATE_NAME build.is:19095 

next state Object {items: Array[8], name: "1"} buitd.ijs:19996 
Object {items: ArrayfgJj，name: "12"} buitd.js:19977 
Pp Object fitems: Array[@], name: "1"} 

Vv mutation UPDATE_NAME @ 190:16:46.466 build.is:19989 
prev state yp object {items: Array[8], name: "1"} build.is:19094 
mutation UPDATE_NAME build.is:19095 
next state Object {items: Array[8], name: "12"} build.is:19096 

Pp Object {items: Array[8], name: "123"} build.is:19077 
= Object {items: Array[8], name: "12"} 

Vv mutation UPDATE_NAME @ 19:16:46.781 build.is:19989 
prev state Object {items: Array[8], name: "12"} build.1is:19094 
mutation UPDATE_NAME build.1is:19095 
next state Object {items: Array[8], name: "123"} build.is:19096 

Object {items: Array[@], name: "1234"} build.is:19877 
= Object {items: Array[@], name: "123"} 

Vv mutation UPDATE_NAME @ 19:16:47.365 build.is:19089 
prev state > object {items: Array[8], name: "123"} build.1is:19094 
mutation UPDATE_NAME build.1is:19095 
next state y object {items: Array[8], name: "1234"} build.is:19896 

| > 

这 样 既 能 使 用 v-model， 又 对 state 状态 进行 了 跟踪 。 如 果 觉 得 每 次 input 事件 都 调 

action 会 引起 性 能 损耗 的 话 ， 也 可 以 使 用 v-model 本 身 的 lazy 修饰 符 来 降低 调用 频率 。 

本 市 会 介绍 在 实际 项 目 中 如 何 组 织 文 件 ， 以 及 用 一 个 实例 来 展示 Vuex 试用 的 场景 。 由 

于 Vuex 的 actions 和 mutations 本 身 都 上 只 是 一 些 函 数 ， 对 存放 位 置 并 没有 严格 的 要 求 ， 所 以 
按照 一 定 的 规则 来 放置 对 熟悉 其 他 vuex 项 目 会 非常 有 帮助 
= 
9.6.1 简单 项 目 
在 第 9.2 市 的 例子 中 ， 我 们 可 以 这 样 组 织 目录 : 

components 

mT App.vue 

vuex 
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上 -一 一 store.js // store 中 包含 了 state 和 mutations 对 象 
上 一 一 actions.js 

广 -一 index.html 

大 一 一 a6p; js 























如 果 你 的 state 和 mutations 内 容 仿 多， 也 可 以 拆 成 独立 的 两 个 文件 








上 





一 一 viex 
上 一 一 index.js // store 中 包含 了 state 和 mutations 对 象 
FC mutations.js 
上 一 一 actions, js 





9.6.2 ”大 型 项 目 


在 大 型 项 ， 可 以 把 相对 独立 的 state 分 割 成 单独 的 模块 ， 每 个 模块 只 修改 自身 的 
state 状态 。 而 对 应 的 子 模块 文件 中 包含 对 应 的 state 和 mutations。 并 且 action 的 类 型 也 可 
以 单独 集合 成 一 个 文件 mutation-types.jS， 避 免 mutations 和 actions 中 各 自 使 用 字符 串 常 

: ， 使 得 维护 和 修改 更 方便 。 

大 型 项 目 结构 如 


















































































































































































































































EF 














[和 二 
上 一 一 后 端 数据 交 互 接口 
| 一 一 components 
广 一 一 APP.vue 
上- 一 一 vuex 
上 -一 一 actions.js // store 中 包含 了 state 和 mutations 对 象 
上 一 一 store.js 
上 -一 一 mutation-types.js 
上 一 一 modules 


广 一 一 moduleA.js 
广 一 一 moduleB.js 
广 一 一 index.html 

mm app.js 











以 vuex/modules/moduleA.js 为 例 : 





import { ACTION A } from './../mutation-type' 


const state = { 
rootA : { 


const mutations = { 
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[ACTION A] (state, param) { 
// 子 模块 中 mutations 的 参数 state 值 即 为 模块 内 设 定 的 state， 无 法 获取 其 他 模块 的 
state 状态 
// 子 模块 的 state 根 节点 不 能 在 模块 内 部 改写 ， 即 state = { …. } 这 样 的 写法 是 无 效 的 
// 只 能 用 以 下 的 写法 修改 状态 


总 七喜 七 全 基站 总 七 下 -二 


export aqefault { 
state, 


mutations 























vuex/store.js 中 集合 多 个 模块 示例 : 








import Vue from 'vue'; 

import Vuex from 'vuex'; 

import ModuleA from './modules/moduleA'; 
import ModuleB from './modules/moduleB'; 


Vue.use (vuex); 


export default new Vuex.store (1{ 
modules : { 
moduleA, 
moduleB 


}) 








此 时 整体 的 state 值 就 变 成 了 : 














rootA : { 


module b : { 
































从 上 面 这 个 例子 可 以 看 出 ， 我 们 已 把 每 个 模块 的 state 和 mutations 合并 在 一 个 文件 中 ， 
而 actions.js 仍 统 一 放置 在 vuex 目录 下 。 这 是 因为 action 可 能 会 触发 多 个 模块 的 mutations。 


例如 在 vuex/actions.js 中 ， 可 以 写成 如 下 : 













































































7 
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import * as actions from './mutation-types'; 

export const updateModuleA = ({ dispatch }, param) => { 
dispatch (actions.MODULE A, param); 
dispatch (actions.MODULE B, param); 

} 


此 时 ， 这 个 action 行为 就 触发 了 两 个 分 属 不 同 模块 的 mutations， 修 改 了 两 次 state。 如 
果 我 们 加 入 了 logger 的 中 间 件 ， 就 可 以 看 到 控制 台中 输出 了 : 
































本 
































Vv mutation MODULE_ A @ 84:49:58.262 build.is:19066 
Prev state y object {module a: Object, module_b: Object} build.is:19071 
mutation opject {type: "MODULE_A", payload: Array[1]} build. 1s:19072 

| next state yp object {module a: Object, module_b: Object} build.is:19073 

Object {_ob__: Observer} build.is:19457 
> Object {module a: Object, module _b: Object} build.is:19054 
Pp Object {module_a: Object, module_b: Object} 

TY mutation MODULE_B @ 84:49:58.267 build.is:19066 
Prev state yp Object {module_a: Object, module_b: Object} build.is:19071 
mutation » Object {type: "MODULE_B", payload: Array[1]} build.is:19072 
next state Object {module_a: Object, module_b: Object} build.is:19073 


) 9.7 ”实例 
本 节 会 利用 vuex 制作 一 个 简单 的 h5 页 面 排版 工具 ， 我 们 预 设 了 一 些 文字 和 图 片 排版 相 
式 的 组 件 ， 用 户 可 以 自主 选择 需要 的 组 件 并 输入 内 容 进行 简单 的 排版 。 

最 终 的 使 用 界面 如 图 9-2 所 示 。 





























HK 














oh 












































































































































请 输入 内 容 
文字 
图 片 
图 文 
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9-2 
























































整个 项 目 会 采取 ES6 的 写法 ， 采 用 webpack 作为 编译 工具 ， 并 使 用 vue-loader 来 处 得 
*.yue 文件 ， 整 体 目 录 结 构 如 下 : 


| 一 一 base // 该 目录 下 包含 了 所 有 文字 和 图 片 排版 样式 组 件 
上 一 一 Image .vue 
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广 一 一 Text.vue 


上 一 一 components 

广 一 一 APP.vue 

[一 一 Content.vue // 编辑 区 域 组 件 

[一 一 Side .vue // 侧 边 栏 组 件 ， 用 于 添加 组 件 

[一 一 Toolbar.vue // base 组 件 控 制 器 ， 用 于 改变 排序 和 删除 
三 

| 一 一 factory.js // base 组 件 的 工厂 函数 

[一 一 vuex // 本 例 只 是 一 个 简单 的 demo ， 并 没有 采取 分 成 子 模块 的 方式 


广 一 一 store.]js 





三 SS 
广 一 一 index.html 


— aBp,1js 








9.7.1 state 结 构 
























































于 Vue.js 本 身 的 特点 就 是 数据 驱动 视图 ， 所 以 始 就 会 先 设 定好 state 的 结构 及 
mutations 方法 。vuex/store.js 代码 如 下 : 

















import Vue from '!Vue' 

import Vuex from ‘'vuex' 

import createLogger from 'Vuex/1logger' 

import createElement from './../utils/factory.js' 


Vue.use (Vuex) 


const state = { 
items: []， // 用 于 存储 base 组 件数 据 结构 的 数组 
isPreview : false // 当前 形式 为 可 编辑 或 预览 状态 


const mutations = { 
ADD ITEM (state, type) { 
state.items.push(createElement (type)); // 利用 工厂 模式 增加 base 组 件 
下 


DELETE ITEM (state，index) { // 删除 pase 组件 
state.items.splice (index, 1); 
}, 


SORT ITEM(state，index，newIndex) { // 改变 base 组 件 排序 


var origin = state.items.splice(index, 1) [0] 
state.items.splice (newIndex, 0, origin); 
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上 


UPDATE ITEM(state，inqdex，key，value) { // 更 新 base 组件 内 容 


var origin = state.items[index]; 
origin[key] = value; 
state.items.$set (index, origin); 


}, 


TOGGLE PREVIEW (state) { 
state.isPreview = !state.isPreview; // 切换 当前 预览 / 编辑 模式 


}; 


export default new Vuex.Store (1{ 
state, 
mutations, 
middlewares : [createLogger ({ 
collapsed : false, 
})] 
}) 


9.7 实例 














Ms 























utils/factory.js 用 于 生成 base 组件 的 数据 类 型 ， 代 码 如 下 : 





function createElement (type) { 
switch(type) { 


case 'text' : // base/Text.vue 组 件 的 数据 结构 
return { 
type, 
content : ' 请 输入 内 容 ， 
} 
case 'eleImage' : // base/Image.vue 组 件 的 数据 结构 
return { 
type, 
url 


} 
case 'mix 
return { 
type, 
让 


m 


Content 


} 
export default createElement; 
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9.7.2 actionsjs 
该 示例 中 的 actions.js 较为 简单 ， 暂 时 不 涉及 后 端 数据 交互 ， 确 认 好 所 需 的 参数 和 
dispatch 调用 的 方法 即 可 。vuex/actions.js 代码 如 下 : 


// 新 增 列表 元 素 

export const addIitem = ({ dispatch }, type) => { 
dispatch ('ADD ITEM', type) 

} 

// 删除 列表 元 素 

export const deleteltem = ({ dispatch }, index) => { 
dispatch ('DELETE ITEM', index) 

j} 

// 对 列表 元 素 进行 排序 

export const SortItem = ({ dispatch }, index, newIndex) => { 
dispatch('SORT ITEM', index, newIndex) 

} 

// 更 新 列表 元 素 内 容 

export const updateItem = ({ dispatch }, index, attr, value) => { 
dispatch ('UPDATE ITEM', index, attr, value) 

} 

// 切换 当前 模式 

export const togglePreview = ({ dispatch }) => { 
dispatch ('TOGGLE PREVIEW'); 



























































9.7.3 app.js 


此 例 中 的 app.js 较为 简单 ， 仅 仅 是 引入 了 store 对 象 ， 设置 了 根 元 素 和 包含 的 根 组 件 。 
app.js 代码 如 下 : 












































import Vue from 'vue' 


import store from './vuex/store' 


import App from './components/App.vue' 


new Vue ({ 
store, 
el: 'body', 
components: { App } 
}) 





9.7.4 ”组 件 结构 


示例 中 整体 包含 4 个 功能 组 件 如 下 : 
QD App.vue : 整个 应 用 的 根 组 件 。 
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由 








@) Side.vue : 侧 边 栏 组 件 ， 用 于 增加 base 组 件 及 预览 / 编辑 模式 的 切换 。 
@ Content.vue : base 组 件 列表 。 

(4) Toolbar.vue : base 组 件 的 工具 栏 。 

components/App.vue 代码 如 下 : 


















































9.7 实例 





<template> 
<div id="app"> 
<side></side> 
<content></content> 
</div> 
</template> 


<script> 
import Side from !./Side.vue' 
import Content from './Content.vue' 
export defauilt { 
components : { 
side, 
Content 


} 
</Stript> 





components/Side.vue 代码 如 下 : 





<template> 
<div class="side"> 
<button class="toggle" Qclick="togglePreview()"> 
<template v-if="isPreview"> 编辑 </template> 
<template v-else> 预览 </template> 
</button> 
<ul class="list-unstyled" v-show="!isPreview"> 
<li @click="addItem('text')"> 文 字 </1i> 
<1li @click="addItem('eleImage')"> 图 片 </1i> 
<li Q@click="addItem('mix')"> 图 文 </1i> 
</ul> 
/diy> 





</template> 


<script> 
import { addItem, togglePreview } from '../vuex/actions' 


export defauilt { 
data() { 
return { 


} 
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] 
vuex: { 
getters : { 
isPreview: state => state.isPreview 
}, 
Actionms: 1 
addItem, // ”添加 base 组 件 
togglePreview  // 切换 state.isPreview 状态 


} 
</script> 





components/Content.vue 代码 如 下 : 





<template> 
<div class="content"> 
<div class="item" v-for="item in items"> 


<toolbar v-if="!isPreview" :item="item" :item-index="$index"></toolbar> 


< 
此 处 用 了 一 个 动态 组 件 ， 即 根据 item.type 去 加 载 对 应 的 base 组 件 
需要 注意 的 是 item.type 的 值 需 要 和 components 选项 中 的 属性 对 应 起 来 
例如 : item.type 为 上 ext，components 中 的 属性 为 Text 
--> 
<components :is="item.type" :item="item" :item-index="$index"></ 
components> 
</div> 
</div> 
</template> 
<SOriBt> 


import Text from './../base/Text.vue'; 
import EleImage from './../base/Image.vue'; 
import Mix from './../base/Mix.vue'; 

import Toolbar from './Toolbar.vue'; 


export default { 
components : { 
Text 
, EleImage 
: Mix 
: Toolbar 
}, 
vuex: 1 


getters: { 
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items: state => state.items, 


isPreview : state => state.ispreview 


} 
/Seript> 





components/Toolbar.vue 代码 如 下 : 





<template> 
<ul class="item-controls"> 














< 半 主 洋 
<! 一 组 件 上 移 一 位 ， 在 首位 的 时 候 不 显示 这 个 图 标 --> 
<i v-if="itemIndex != 0" Qclick="sortItem(itemIndex, itemIndex - 1)" 
class="glyphicon glyphicon-chevron-up"> 
</i> 
</1i> 
<1i> 


<! 一 删除 这 个 组 件 --> 


<i Qclick="deleteItem(itemIndex)" class="glyphicon glyphicon-remove"> 





云 // 芋 交 
</1i> 
<1i> 
<! 一 组 件 下 移 一 位 ， 在 末 位 的 时 候 不 显示 这 个 图 标 --> 
<i v-if="itemIindex != items.length - 1" @click="sortIitem(itemIndex, 


itemIndex + 1)" 
class="glyphicon glyphicon-chevron-down"> 
</i> 
</1i> 
</ul> 
</template> 


<script> 
import { deleteItem, sortIitem } from '../vuex/actions' 


export default { 


props : ['item', 'itemIndex'], 
vuex: { 
getters: { 


items: state => state.items 
}, 
Actioms:. 1 

deleteIltem, 

sortIitem 
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</script> 





9.7.5 ” base 组 件 


base 组 件 即 是 可 供 排版 的 组 件 ， 这 个 组 件 主要 对 应 state 中 items 数组 中 的 单个 item。 每 个 
组 件 提供 了 一 定 的 样式 和 可 供 修改 的 内 容 。 我 们 以 Text.vue 和 Image.vue 两 个 组 件 来 进行 说 明 。 






















































































base/Text .vue 
<template> 
<div class="text-wrap"> 
<! 一 组 件 提供 两 种 模式 ， 非 预览 模式 下 才 可 以 进行 编辑 --> 
<div v-if="!isPreview"> 
Ss= 
此 处 的 textarea 没有 绑 定 v-model， 而 是 在 blur 的 时 候 触 发 了 actions. 
updateItem ， 
以 此 来 修改 state 的 状态 
一 -> 
<textarea :Value="item.content" blur="updqate" class="form- 
control"></textarea> 
</div> 
<! 一 预览 模式 ， 仅 可 见 内 容 ， 无 法 进行 修改 --> 
<div v-else class="preview"> 
{{ item.content }} 
</div> 
<div class="split"></div> 
</div> 
</template> 


<SCriDt> 


import { updateItem } from '../vuex/actions' 


export defauilt { 
props : ['itemIndex', 'item'], 
vuex: 1 
getters : { 
isPreview : state => state.isPreview 
}, 
actioms: 1 


updateItem 
Fy 


methods : { 
update(e) { 
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this.updateItem(this.itemIndex, 'content', e.target.value); 


} 
</script> 
base/Image.vue 


<template> 
<div> 
<! 一 此 处 和 Text .vue 一 样 ， 也 是 通过 state.isPreview 的 值 来 控制 是 否 为 预览 模式 --> 
<div v-if="!isPreview"> 
<input v-el:file v-if="!item.url" Qchange="upload" class="form- 


control™" type="file"> 
<img v-if="item.url" :src="item.url"> 
</div> 
<div v-else> 
<img v-if="item.url" :src="item.url"> 
</div> 
</div> 
</template> 


<SCript> 
import { updateItem } from '../vuex/actions' 


export defauilt { 
props : ['itemIndex', 'item'], 
vuex: 1 
getters : { 
isPreview : state => state.isPreview 
}, 
actioms: 1 
updateItem 


}, 
methods : { 
upload(e) { 

var fileglement = this.s$els.file; 
Var file = fileElement .files[0]; 
// 获取 input 上 传 的 文件 ， 由 于 此 实例 不 和 后 端 交互 ， 
// 所 以 直接 获取 文件 在 该 document 中 的 url 路 径 ， 进行 展示 
Var blobURL = window.webkitURL.createObjectURL (fle) 
this.updateItem(this.itemIndex, ‘'url', blobURL); 


} 
</script> 
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9.7.6 ”展示 结果 


最 终 运 行 代码 结果 如 图 9-3 所 示 。 























请 输入 内 容 
ChocseFie | No file chosen 入 
rg X 
到 9-3 






















































































户 可 以 在 侧 边栏 中 添加 任意 组 件 ， 并 在 右 侧 修改 其 内 容 或 进行 排序 ， 也 可 以 切换 预览 
状态 ， 对 最 终 效 果 进 行 查看 ， 如 图 9-4 所 示 。 


请 输入 内 容 





















































Thisis Vue.js 








展示 和 展示 逻辑 业务 运 辑 和 数据 











加 9-4 









































对 于 编辑 的 结果 ， 我 们 可 以 将 state 中 的 数据 保存 到 后 端 ， 并 新 建 一 个 类 似 于 preview.vue 
这 样 的 组 件 ， 只 展示 items 的 预览 模式 ， 这 样 就 可 以 供 普通 用 户 进 行 访问 和 查看 。 我 们 也 可 以 
利用 类 似 于 html2canvas 的 框架 ， 将 当前 页 面 内 容 保存 成 图 片 ， 这 样 也 就 省 去 了 部 分 开发 页 
而 的 工作 量 。 
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) 9.8 Vue.js 2.0 的 变化 


同 Vue-router 一 样 ， 随 着 Vue.js 2.0 的 更 新 ，Vuex 也 推出 了 新 的 2.0 版 本 1 
Vuex 主要 在 语法 层面 、 模 块 移植 和 组 合 以 及 配合 Vue.js 2.0 的 新 特性 服务 端 演 染 方面 进行 了 
修改 ， 所 以 组 件 调 用 Vuex 的 方式 发 生 了 比较 大 的 变化 ， 本 节 主 要 从 使 用 方法 上 对 2.0 进行 部 
分 说 明 。 





































































































































































































9.8.1 State 
























































六 


Vuex 2.0 中 废除 了 组 件 中 的 vuex 选项 ， 组 件 本 身 就 可 以 通过 this.$store.state 的 方式 
获取 数据 ， 考 虑 到 state 中 的 数据 是 时 常 更 新 的 ， 官 方 推荐 在 计算 属性 中 设 定 获取 state 数据 ， 





































































































const Content = 
template: '<div class="item" v-for="item in items">{{ item }}</div>', 
computed: { 
items () { 


return this.$store.state.items 


} 























而 当 一 个 组 件 中 需要 获取 state 内 多 种 局 
可 以 简化 上 述 的 写法 : 











el 











性 时 ，Vuex 提供 了 一 个 mapState 的 帮助 函数 ， 











import { mapState } from 'vuex' 


export defauilt { 
2 
computed: mapStatel(t{ 
items: state => state.items, 
// 可 以 直接 赋值 字符 串 ， 等 价 于 state => state.items 
itemsAlias: 'items', 
// 函数 内 可 调用 组 件 实例 this， 可 以 对 state 的 数据 加 上 组 件 内 部 的 处 理 
JocalItems (state) { 
return state.items.push (this.localIltems) 
} 
}) 
} 

















mapState 除了 接受 对 象 参数 之 外 ， 也 接受 数组 参数 ， 相 当 于 直接 获取 state 中 的 多 个 属 
性 ， 且 在 当前 组 件 内 state 属性 按 原 名 调用 ， 例 如 : 


computed: mapState([ 
// 组 件 实例 this.count 即 为 store.state.count 
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另外 ， 当 组 件 内 本 身 就 含有 计算 属性 时 ， 我 们 可 以 通过 … 扩 展 运 算 符 来 进行 书写 ， 这 样 
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nl 
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computed: 
localComputed () { /* ... */ ]， 
. .mapSstate l(t{ 
items: state => state.items 
}) 
} 


.mapState ( {} ) 会 将 自身 内 部 的 属性 添加 到 新 的 对 象 中 ， 即 最 后 computed 接收 到 的 


对 象 为 { localComputed : function0{...}, items : function0{...}}。 

































































9.8.2 Getters 


Vuex 2.0 中 将 原先 游离 于 外 部 的 Getters 模块 包含 了 进来 ， 我 们 在 声明 一 个 Vuex. 
Store() 实例 的 时 候 可 以 直接 传 入 getters 对 象 ， 对 象 属 性 为 可 接受 state 参数 的 函数 ， 例 如 : 












































0 








const store = new Vuex.Storelt{ 
state; { 
items: [ 
{ id: 1, type: “七 公交 七 }; 
{ id: 2, type: 'image' } 
] 
}, 
getters: { 
getTexts: state => { 
return state.items.filter (item => item.type == 'text') 


} 
}) 
我 们 在 组 件 内 就 可 以 通过 this.$store.getters.getTexts 直接 获取 筛选 后 的 数据 ， 辣 state 
类 似 ，Vuex 也 暴露 了 mapGetters 函数 帮助 我 们 获取 getters 方法 ， 例 如: 



























































import { mapGetters } from ‘'vuex' 


export defauilt { 
2 
computed: { 
. .mapGetters([ 
'getTexts' 
/# 
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Mutations 的 触发 方式 发 生 了 变化 ， 取 消 了 原先 的 dispatch 接口 ， 而 替换 成 了 store. 
commit (type，data ) 的 方式 进行 触发 。 声 明 的 方式 没有 发 生变 化 ， 依 旧 是 实例 化 Vuex. 
Store 的 时 候 传 入 mutations 对 象 ， 例 如 : 



















































































const store = new Vuex.Storel(t{ 
St ates "{ 
items: 
}， 
mutations: { 
add (state, item) { 
state.items.push (item); 


} 
) 
与 Vue.js 1.0 不 同 的 是 ，Vue.js 2.0 中 并 不 再 强制 组 件 内 必须 使 用 actions 的 函数 
并 dispatch 后 才能 间接 调用 mutations， 而 是 组 件 内 可 以 直接 调用 mutations 方法 ， 即 
this.$store.commit(add', item)， 或 者 只 传递 一 个 选项 参数 ， 包 含 type 属性 即 可 ， 例 如 

: item })。 从 某 种 程度 上 说 ， 简 化 了 对 state 更 新 的 
需要 获取 异步 数据 ， 则 必 

































































































































































this.$store.commit({ type : 'add', item 
流程 。 但 需要 注意 的 是 ，mutations 中 的 操作 只 能 为 同步 操作 ， 如 
须 使 用 actions 来 进行 处 

司 样 ， 我 们 也 可 以 使 用 Vuex 的 mapMutations 方法 来 简化 调用 方式 : 
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import { mapMutations } from 'vuex' 


export defauilt { 
A 
methods: { 
. .mapMutations({ 
addon 
}) 





9.8.4 Actions 


同 Getters 类 似 ，Actions 在 Vue.js 2.0 中 也 归 入 到 了 Vuex.Store 选项 中 ， 我 们 在 实例 
化 的 时 候 也 需要 传 入 actions 参数 ， 例 如 : 
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Const store 


new Vuex.Store ({ 
state;: { 





items: [] 
ys 
mutations: { 


add (state, item) { 


state.items.push (item) 
bs 
actions: { 

add 


(context) { 


context.commit ('add') 





















































































































































































































































其中 actions 参数 context 主 要 包含 了 commit、dispatch、state 和 getters 属性 ， 
调用 commit 即 可 触发 mutations 函数 ， 使 用 dispatch 则 可 继续 触发 其 他 actions 函数 。 
mapActions 用 法 与 上 述 类 似 : 
import { mapActions } from ‘'vuex' 
export defauilt { 
人 
methods: { 
. .mapActions (I[ 
Wels 
] ) 
} 
从 context 的 dispatch 方法 可 以 看 出 ，actions 支持 多 个 action 的 组 合 使 用 ， 并 且 经 常 
会 使 用 到 异步 请 求 获取 服务 端 数据 ， 我 们 可 以 在 action 函数 中 返回 Promise 对 象 来 处 理 这 种 
情况 。 例 如 : 
aCtLIoONSs 4 
actionA ({ commit }) { 





return new Promise((resolve, reject) => { 
setTimeout ( () // 模拟 了 蜡 步 请 求 获取 数据 

commit ('someMutation') 

resolve() 

}, 1000) 


}) 


=> { 
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然后 在 其 他 action 中 就 可 以 这 么 调用 : 























actionmnse 4 
// 
actionB ({. dispateh, ‘Gommit. 求知 -4{ 
return dispatch('actionA') .then(() => { 
commit ('someOtherMutation') 
} 





9.8.5 Modules 


最 后 说 明 下 Vue.js 2.0 ate 的 分 模块 处 理 方式 ， 每 个 模块 都 可 以 包含 自己 的 state、 
mutations、actions 和 getters，Vuex 也 会 给 它们 多 暴露 一 个 rootState 的 参数 ， 可 以 用 于 访 


问 底层 的 state 对 象 。 大 致 的 使 用 方法 如 下 : 
































CD 




































































Ee 














const moduleA = { 
State: df see ds 
i 
actLOmSe tt uy Fs 
getters: { ... } 


const moduleB = { 
Stater { io Fs 
mutations:  { is + 


Aactions: {sus 


const store = new Vuex.Storelt{ 
modules: { 
a: moduleA, 
b: moduleB 


} 

















在 子 模 块 中 的 getters、mutations 和 actions 中 ， 获 取 的 state 丝 为 子 模 块 本 身 的 state， 
而 底层 模块 的 引用 将 会 暴露 在 action 的 context.rootState 和 getter 的 第 三 个 参数 中 ， 例 如 : 








































































































const moduleA = { 
A 
actiorns: 1 
actionA ({ state, commit, rootState}) { 
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} 
const moduleA = { 
Yt 
getters: { 
getsth (state, getters, rootSstate) { 
// ee 
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跨 平 台 开 发 : Weex 













































































































































































移动 端 开发 ， 特 别 是 hybrid 这 类 技术 是 现在 前 端 绕 不 过 去 的 一 个 话题 。 在 2011 年 ， 
phoneGap ( 现 改 名 cordova ) 这 个 打包 工具 就 已 问世 ， 它 能 把 Web 项 目 打包 成 native app， 
可 以 在 ios，android， 甚 至 于 wp 上 运行 。 随 着 angularjs，reactjs 的 面世 ， 这 类 hybrid 技 
术 也 有 了 各 自 结合 的 方式 ， 有 基于 angularjs+cordova 的 ionic，ReactNative 更 是 异常 火爆 。 
而 阿里 集团 在 2016 年 6 月 份 也 开源 了 采用 Vue.js 核心 源码 的 weex， 在 语法 上 更 贴近 Web 





























































































































) 10.1 Weex 简 介 


Weex 作为 一 项 跨 平台 技术 ， 建 立 了 一 套 源 码 转化 及 native 与 JS 通信 的 机 制 。 在 开发 阶 
段 ， 我 们 可 以 在 .we 文件 中 编写 <template>、<style> 和 <script> 标签 ，weex 提供 的 转化 
器 可 以 将 其 转换 成 JS Bundle， 并 部 团 在 服务 器 端 以 响应 客户 端的 请 求 。 当 客户 端 接收 到 这 些 
JS Bundle 后 ， 又 可 以 被 客户 端 中 的 JS 引擎 调用 ， 用 于 管理 Native 视图 的 渲染 、API 的 调用 
以 及 处 理 用 户 的 交互 。 图 10-1 即 为 weex 官网 给 出 的 整体 流程 图 。 
时 中 JS Framework 提供 了 模块 注册 、 虚 拟 DOM、Native 通信 等 功能 。 当 JS Bundle 
从 服务 器 下 载 后 ， 将 会 被 注册 成 模块 ， 并 编译 成 虚拟 DOM， 发 送 演 染 指令 给 Native。 而 
i0OS、Android 和 H5 分别 具有 自己 的 泻 染 引擎 ， 也 就 能 将 同一 段 代 码 分 别 在 不 同 的 端 展 示 成 
相同 的 样式 ， 并 进行 事件 绑 定 ， 处 理 用 户 的 交互 。 由 于 采用 的 方案 是 演 染 成 Native 视图 ， 所 


以 在 性 能 上 会 比 传统 的 webview 打包 方式 要 好 。 但 相应 的 ， 对 于 Web 前 端 开发 者 来 说 并 不 能 


发 ， 从 公布 的 数据 来 看 ， 在 性 能 上 对 比 其 他 同类 技术 也 有 一 定 优 势 。 
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靖 

















用 所 有 HTML 中 的 特性 ， 因 为 这 些 特 性 都 需要 i0S 或 Android 泻 染 引擎 的 支持 ， 如 果 疝 未 
支持 的 话 ， 在 Native 端 其 实 并 不 能 展现 出 预期 的 效果 。 


et es 
transformer deploy | 


V's 
JS Framework 


| eropra/Va 


JS-Native Bridge 


callJs 4 callNative 


ios Android H5 
RenderEngine RenderEngine RenderEngine 


Client 




































































Server 
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) 10.2 Weex 安 装 


首先 需要 下 载 weex 代码 。 在 https://github.com/alibaba/weex 网 站 上 下 载 ， 可 以 选择 
V0.6.1 版 本 。 在 ios 和 android 中 启动 weex 分 别 需要 安装 各 自 的 环境 。 












































10.2.1 ios 环 境 安装 


weex 所 需 的 ios 环境 安装 步 又 如 下 : 
人 安装 xcode， 可 从 app store 中 下 载 。 已] 国 。 六 WeexDemo ) 需 iPhone 4s 
@) 安装 CocoaPods (ios 开发 的 第 三 方 资 

里 工具 ， 类 似 于 npm )。 






































ul 








































































































Carrier 令 2:08 PM mm 
需要 先 安 装 ruby，mac 默认 自 带 ruby， Ee Weex Demo [@ 
但 版 本 不 一 定 够 高 ， 可 以 通过 rvm ( 类 似 于 nvm， olio wrid 
同时 管理 多 版 本 环境 ) 更 新 ruby。 选 择 2.3.0 
版 本 即 可 正常 安装 CocoaPods。 More Syntax 
选择 2.3.0 版 本 即 可 正常 安装 CocoaPods。 安 








Mhmon Style 








装 命令 为 : sudo gem install cocoapods 


































































































@) 进入 weex 目录 下 ios/playground, 并 Animation 
运行 pod install， 安 装 第 三 方 资源 ， 该 过 程 比较 本 
长 ， 请 耐心 等 待 。 
@) 用 xcode 打开 WeexDemo.xcwork space。 Image 
@ 单 击 “ 运 行 " 即 可 看 到 官方 的 demo， 如 
图 10-2 所 示 。 到 10-2 
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10.2 Weex 安 装 


10.2.2 android 环 境 安装 


android 环境 安装 步骤 如 下 : 
@ 下 载 安装 JDK 和 Android Studio。 
@ 用 android studio 打开 android/playground。 
@ 首次 可 能 会 有 些 安装 包 没有 装 好 ， 打 开 SDK manager， 确 保 图 10-3 中 这 几 个 包 安 
装 好 ， 以 及 对 应 的 android SDK。 
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画 Android Support Repository 35 区 Installed 
Intel x86 Emulator Accelerator (HAXM installer) 6.0.3 区 Installed 
色 10-3 
@ 安装 成 功 后 ， 单 击 运行 ， 如 图 10-4 所 示 。 

















图 10-4 
加 即 可 看 到 官方 样 例 ， 如 图 10-5 所 示 。 












































5554:Nexus_5_AP| 21 x86 


Hello World 


More Syntax 


Common Style 


Animation 


Text 


Image 
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weex 同样 也 支持 在 web 端 直接 运行 ， 步 又 如 下 : 
Q@9 在 weex 代码 根 目录 下 运行 ./start。 
@ 通过 浏览 器 访问 http://127.0.0.1:12580/， 如 图 10-6 所 示 。 


一 一 一 一 
D) 127.0.0.1:12580 
世 二 中 t 类 NA: 国 cas 局 直 收 ZA 全 反 术 村 国 pnp 


Phone6Pus 4 x 736 100% 






























































Hello World 


More Syntax 


Common Style 


Animation 


Text 


Image 


Input 


Scroller 











唤 
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As 











这 样 三 端的 环境 基本 就 搭建 起 来 了 ， 我 们 可 以 先 在 Web 中 进行 开发 ， 达 到 一 定 的 效果 
就 可 以 使 用 ios 和 android 模拟 器 观察 native 下 页 面 的 展示 和 效果 。 




















TT 


















































) 10.3 ”Weex 实 例 与 运行 






























































weex 开源 代码 目录 下 的 exapmles 给 用 户 提供 了 不 少 已 经 写 好 的 实例 ， 可 以 先 通过 
hello.we 这 个 样 例 简 单 介 绍 下 weex 的 开发 。 

如 第 10.2 节 所 述 ， 在 weex 根 目录 下 运行 ./start 时 ， 可 以 通过 浏览 器 访问 到 官网 提供 的 
样 例 ， 单 击 “Hello World” 即 可 跳 转 到 hello.we 对 应 的 页 面 ， 如 图 10-7 所 示 。 
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10.3 ”Weex 实 例 与 运行 


口 127.0.0.1:12580/index.html?page=./examples/build/hello.js 
! 竺 作 相 关 网 站 ! ” 国 css3 息 在 线 I 具 ” 筷 技术 二 去 “ 乓 | 
414 x 736 100% vw DPR Y Y S 


Phone 6 Plus v 








Hello World. 





网 


10-7 











hello.we 代码 如 下 : 





<template> 
<div> 

<text style="font-size:100px;">Hello World.</text> 
</div> 

</template> 

基本 语法 与 .vue 和 vue-loader 类 似 ， 也 是 在 一 个 文件 

标签 包 于 对 应 的 html、css、js 结构 。weex 也 提供 了 多 个 内 置 标签 ， 例 如 本 例 中 的 text， 来 

进行 页 面 的 布局 。 

我 们 可 以 试 着 对 hello.we 进行 以 下 修改 ， 增 加 





通过 template、style、script 




















































































































一 些 样式 和 js 方法 。 











<template> 
<div> 
<text class="title">{{ msg }}</text> 
= 
weex 内 置 button 标签 
onclick 为 绑 定 事件 语法 
type 和 size 分 别 对 应 了 putton 内 置 的 样式 


一 一 > 
<wxc-button value="alert" 


onclick="alert" type="primary" size="middle"> 


</wxc-button> 
</div> 
</template> 


<SCript> 
// 引入 weex 的 内 置 组 件 ， 本 例 中 主要 是 为 了 使 用 wxc-button 标签 


require('weex-components'); 


// 输出 的 对 象 与 Vue .js 类似， 符合 Vue .extend 属性 的 构建 器 对 象 
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module.exports = { 
data : { 
msg : 'Hello Weex' 
}, 
methods : { 
alert : function() { 
alert (this.msg); 
} 
} 
}; 
</script> 
<style> 
.title { 


font-size: 


} 
</style> 


100px; text-align: center; 








呈 忆 忆 











提亲 [浏览 器 页 下 




















， 即 可 看 到 效果 ， 如 图 10-8 所 示 。 











| DD localhost:12580/index.html?page=./examples/build/hello.js 




















Q@ 修改 ios 或 an 





iPhone4 YY 320 x 480 100% v v M v 


Hello Weex 
| 


localhost:12580 says: 
Hello Weex 


Prevent this page from creating additional dialogs. 


OK 
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如 果 需 要 在 ios 或 android 环境 中 运行 程序 ， 看 到 实际 效果 的 话 ， 我 们 有 两 种 方式 : 














droid 应 用 的 jsbundle 的 ip 访问 地 址 ， 即 native app 实际 调 
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了 的 js 


10.3 ”Weex 实 例 与 运行 

















bundle 是 在 你 当前 机 器 启动 的 服务 上 的 。ios 对 应 的 修改 文件 为 DeamoDefine.h， 将 其 中 的 
#define CURRENT_IP @"your computer device ip", 修改 为 自己 机 器 的 局 域 网 的 ip 即 可 ; 
android 则 修改 app/java/com.alibaba.weex/IndexActivity 文件 中 的 private static String 


CURRENT_IP= DEFAULT_IP 






























































@ 首先 安装 weex 的 开发 工具 weex-toolkit : npm install -g weex-toolkit。 

然后 在 手机 上 安装 weex 官网 提供 的 android 或 ios 的 playground 应 用 。 

在 weex 根 目 录 下 运行 命令 weex examples/hello.we - qr。 

然后 用 手机 的 playground 扫描 这 个 二 维 码 (pc 和 手机 需要 在 同一 wifi 下 )， 即 可 在 导 
机 上 看 到 效果 ， 如 图 10-9 所 示 。 
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tening on 


Please download H qaygr x qnd scan this QR 
ame Hi-Fi network a 








中 
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) 10.4 Weex 基 础 语 ; 


Weex 的 语法 与 Vue.js 类 似 ， 只 不 过 指令 都 去 掉 了 v- 这 个 前 级 ， 本 节 简 单 介 绍 一 下 
Weex 的 基础 用 法 ， 主 要 包含 数据 绑 定 、 事 件 绑 定 和 模板 逻辑 这 三 个 方面 。 





































































































10.4.1 数据 绑 定 


Weex 的 数据 绑 定 也 是 采用 {{}} 作为 标记 ， 同 时 也 支持 语法 表达 式 和 计算 属性 ， 暂 不 支 
持 watch 和 model 特性 ， 如 果 需 要 同步 用 户 的 输入 数据 ， 需 要 在 oninput 或 者 onchange 上 
手动 修改 数据 。 


<template> 












































三 
























































<div> 
<! 一 普通 绑 定 --> 
<text class="title">{{ msg }}</text> 


<! 一 支持 表达 式 --> 


<text>{{ prefix + '-' + msg }}</text> 
<! 一 使 用 计算 函数 --> 
<input type="number" class="input" value="{{yuan}}" onchange= 
"changePrice" /> 
</div> 
</template> 
<SGripBt> 


require('weex-components'); 


module.exports = { 


data : { 
msg : "Hello Weex', 
prefix : "ali"v 


price : 100， 
上 


computed : { 
yuan : { 
get : function() { 


return (this.price / 100) .toFixed (2);，; 
Fs 
set : function(value) { 


this.price = value * 100; 


$3 
methods : { 
changePrice : function(e) { 


this.yuan = e.value; 
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10.4 Weex 基 础 语法 


}; 
</script> 





10.4.2 ”事件 绑 定 



































Weex 的 事件 绑 定 直接 采用 的 是 行内 绑 定 ， 例 如 : 











全 





<template> 


<wxc-button value="alert" onclick="alert('arg', S$event)" 


"primary" size="middle"></wxc-button> 


</template> 
<SCript> 
module.exports = { 
methods: { 
alert: function (argl, e) { 
// TODO 
} 
} 
/Stript> 


tybe= 





























$event 对 象 中 主要 包含 了 3 个 属性 。 
Q@ type : 触发 事件 的 名 称 。 

@ target : 触发 事件 的 元 素 。 

@ timestamp : 触发 时 间 。 

















10.4.3 ”模板 逻辑 






































谨 
re 
CBr 
人 f 

可 
和 H 
过 
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71 



































Weex 中 采用 if 和 repeat 属性 来 进行 模板 的 逻辑 











<template> 
<container> 
<text orclick="togdle"STodgLe</text> 
<image src="..." if="{{shown}}"></image> 
</container> 
<container> 
<container repeat="{{1list}}" class="{{gender}}"> 
<image src="{{avatar}}"></image> 
<text>{{nickname}}</text> 
</container> 
</container> 
</template> 
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让 中 repeat 也 支持 {{v in listy ffk， vin list 的 写法 ， 以 及 $index 属性 获取 数组 








) 10.5 Weex 内 置 组 件 


Weex 自身 提供 了 不 少 内 置 的 组 件 ， 对 于 一 些 电 商 类 、 新 闻 类 应 用 来 说 提供 了 不 错 的 支 
持 。 我 们 只 需要 调用 组 件 并 设置 相关 的 属性 就 可 以 生成 三 端 都 能 使 用 的 视图 功能 ， 极 大 提 
升 了 开发 效率 。 本 节 主 要 介绍 weex 组 件 的 公共 属性 及 事件 ， 以 及 部 分 组 件 的 属性 及 使 用 
方式 。 
























































































































































































































































10.5.1 scroller 





scroller 组 件 可 以 包含 多 个 子 组 件 ， 如 果子 组 件 的 高 度 总 和 超过 了 scroller 了 
即 可 滚动 子 组 件 。 
































<template> 
<scroller> 
<div repeat="{{1list}}"> 


<text>{{name}}: ${{price}}</text> 
</div> 


</SCLOLLSrES 


</template> 


<sGript> 
module.exports = { 
datas 赣 
lists [ 
{name: '...', price: 100}, 
{name: '...', price: 500}, 


{name: '...', price: 1.5}, 


} 
</script> 





scroller 组 件 还 可 以 包含 refresh 和 1oading 子 组 人 
个 功能 。 我 们 以 loading 为 例 : 











WT 
































， 用 于 提供 下 拉 刷 新 和 上 拉 加 载 更 多 











RE 





<loading class="loading-view" 


display="{{loading display}}" 
"onloading"> 


onloading= 


<loading-indicator style="height:60;width:60" ></loading-indicator> 
</loading> 
<SCript> 


require('weex-components'); 
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module.exports = { 
methods: { 


onloading: function(e) { 


Var self = this; 
self.loading display = 'show'; 
setTimeout (function () { 
self.loading display = 'hide'; 
}, 1000) 
} 
}, 
data: { 


refresh Adisplay: "hide", 
loading display: 'hide', 
sections: [ 

































































































































































</script> 
组 件 提供 onloading 事件 和 display 属性 ， 用 于 控制 显示 loading 组 件 ， 并 处 理 loading 
1 执行 的 业务 逻辑 。 
10.5.2 list 
list 即 为 常用 的 列表 组 件 ， 可 以 包含 header 、cell 、refresh 、loading 组 件 。 其 中 cell 组 
件 为 list 元 件 ， 用 于 展现 列表 元 素 的 属性 及 行为 。refresh 和 1loading 组 件 效 果 与 scroller 类 似 。 
<template> 
<div> 


<list class="list"> 
<cell class="row" repeat="{{rows}}" 


index="{{S$index}}"> 
<div class="item"> 


<text class="item-title">row {{id}}</text> 
</divy> 
</cell> 
/LEStS 
</div> 
</template> 
<script> 


require('weex-components'); 


module.exports = { 
data: { 
rows:|[ 
站 三 二 小 志 » {id: 29} 
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</script> 





10.5.3 Switch 


















































Switch 是 用 于 模仿 i0S 风格 的 一 个 开 / 关 插件 ， 主 要 的 属性 为 checked， 可 以 通过 
数据 绑 定 来 控制 开关 。 组 件 也 提供 了 onchange 事件 ， 传 递 当前 组 件 的 状态 和 事件 的 发 生 










































































<switch checked="{{checked}}" onchange="onchange"></switch> 
<SGriBt> 


require('weex-components'); 


module.exports = { 
data 4 
checked : false, 
}, 
methods : { 
onchange : function(e) { 


console.log(e); 


} 
}; 
</script> 


默认 样式 如 图 10-10 所 示 。 
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10.5.4 Slider 









































Slider 组 件 提供 了 轮 播 图 的 效果 ， 通 过 属性 auto-play 可 以 设置 是 否 自动 播放 ，interval 
则 可 以 设 定 每 个 页 面 停留 的 时 间 。 组 件 中 可 以 包含 子 组 件 indicator， 用 于 标记 轮 播 序列 ， 
indicator 自身 也 提供 大 小 、 颜 色 、 选 中 状态 属性 的 修改 。 页 面 切 换 轩 ， 可 以 监听 onchange 习 
件 ， 获 取 当 前 页 面 的 序号 。 
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<template> 
<div> 
<slider auto-play="true" onchange="change" > 
<image repeat="{{imageList}}" src="{{src}}" ></image> 
<indicator></indicator> 
</slider> 
</div> 
</template> 


SGript> 


require('weex-components'); 


module.exports = { 
datas 亲 
imageList: | {Sees Veav }r C8Eer Ves"} 


Fy 
methods: { 
change: function (e) { 


) 


/SeriptS> 








官方 demo 中 slide 实例 的 展示 如 图 10-11 所 示 。 











iPhone4v 320 x 480 100% v DPR;20 YY Moblev S 


auto-play = false 


WM 


WEEX WEEX 


auto-play = true 


WW \p 


从 = 人 








中 
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10.5.5 wxc-tabbar 


wxc-tabbar 组 件 主要 模拟 了 native app 的 底层 tab 切换 的 样式 及 功能 。 我 们 可 以 先 看 
一 下 wxc-tabber 的 demo 效果 ， 如 图 10-12 所 示 


Ws 









































iPphone 4v 320 x 480 100% v 


This is Tab 2 Test. 














图 10-12 

















wxc-tabbar 主要 提供 了 底部 tab 图 标的 展示 和 控制 ， 而 每 个 tab 都 会 对 应 一 个 内 容 组 件 


























































































































而 这 个 内 容 组 件 则 由 使 用 己 定 义 路 径 进行 引用 ，wxc-tabbar 并 不 关心 当前 tab 内 容 的 展 
示 。 以 下 面 代码 为 例 : 
<template> 








<div style="flex-direction: 


<wxc-tabbar tab-items = 


column;"> 


{{tabItems}}></wxc-tabbar> 


</div> 
</template> 
require('weex-components'); 
module.exports = { 
datas < 


tabItems: [ 
{ 
index: 0， // tab 的 顺序 
title: 'tabl',， // tab 名 称 
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titleColor: '#000000'， // tab 名 称 字体 颜色 

icon: "， // 必 填 项 ， 即 使 属性 为 空 

image: ™, // tab 图 标 

selectedImage: "，// tab 选中 图 标 

src: 'component/tabbar/tabbar-item.js?itemId=tab1l'，// 内 容 组 件 地 址 
visibility: "visible'  // tab 当前 显示 状态 
































本 /| 


除了 tab-items 以 外 ，wxc=-tabbar 还 有 selected-color 和 unselected-color 两 个 属 4 
于 控制 tab title 在 选中 和 未 选中 时 的 字体 颜色 。 另 外 ,我 们 可 以 在 create 或 ready 钩子 
数 中 监听 tabBar.onClick 事件 ， 点 击 tab 切换 时 wxc-tabbar 会 向 上 崩 泡 这 个 事件 ， 例 如 : 











妇 


HR 









































区 















































methods: { 
ready: function (e) { 
var vm = this; 
vm.$Son('tabBar.onClick',function(e)f{ 
console.1log(e) 
下 





10.5.6 wxc-navpage 


























HI 


wxc-navpage 模拟 了 native app 顶部 导航 的 效果 ， 上 有 具体 的 效果 和 使 用 代码 如 图 10-13 所 示 。 





























iPhone 4v 320 x 480 100% v DPR:20Y Mobievw © 
push a new page 
pop to the last page 














唤 








10=713 
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<wxc-navpage data-role="none" height={ {navBarHeight}} 
background-color="#f£ff5898" title={{title}} title-color="white" left- 
item-title="More" 
left-item-color="white" right-item-src=""> 


</wxc-navpage> 

















wxc-navpage 基本 靠 属 性 进行 样式 及 按键 的 控制 ， 也 仪 提供 了 左 侧 和 后 侧 各 一 个 按键 的 
空间 。 具 体 的 使 用 属性 如 下 。 


height : 顶部 导航 高 度 。 



























































background-color : 导航 背景 色 。 

itle : 导航 名 字 。 

itle-color : 导航 字体 颜色 。 
eft(right)-item-title : 左 ( 右 ) 按键 名 字 。 
eft(righb-item-color : 左 ( 右 ) 按键 字体 闫 1 
eft(righb-item-src : 左 ( 右 ) 按键 图 标 。 
wxc-tabbar 类 似 ，wxc-navpage 也 提供 了 向 J 
leftItem.click 和 naviBar.rightItem.click， 我 们 只 需要 在 页 
以 处 理 用 户 点 击 导航 左右 按键 的 逻辑 。 











ES 























[Ey 














办 





hal 





Kel 


泡 的 事件 ， 分 别 为 naviBar. 
$on 监听 这 两 个 事件 ， 就 可 


[tT 
匣 
a 

































































I 












































[ye 











除了 上 述 组 件 之 外 ，weex 还 提供 了 text、image、a、video、input、web 等 内 置 组 件 ， 
具体 的 用 法 和 实例 可 以 参考 https://alibaba.github.io/weex/doc/components/main.html 网 
站 中 的 官方 文档 。 整 体 来 说 组 件 对 常规 的 业务 开发 E 的 支持 ， 但 如 果 需 要 一 些 定制 化 的 修 
改 ， 目 前 看 起 来 可 能 还 不 大 方便 。 


) 10.6 Weex 内 置 模块 


Weex 内 置 了 一 些 功 能 模块 ， 可 以 通过 require(“@weex-module/** ) 的 方式 引用 进来 ， 
并 使 用 该 模块 的 相关 api。 本 市 就 主要 介绍 一 下 Weex 中 的 这 些 内 置 模块 及 其 作用 。 








































































































































































































































































































10.6.1 dom 


dom 模块 ， 顾名思义 ， 主 要 提供 了 对 DOM 树 操作 的 一 些 方法 。 和 传统 浏览 器 中 的 

document 操作 DOM 不 同 的 是 ， 该 模块 API 是 将 vitrual-dom 中 的 消息 发 送 到 native 演 染 

进行 DOM 树 的 更 新 ， 而 且 该 模块 中 仅 scrollToElement 可 在 .we 文件 中 执行 ， 其 余 方 法 
仅 能 被 native 演 染 器 使 用 。 

scrollToBlement(node，options) : 让 页面 滚动 到 对 应 节点 ， 该 API 仅 能 在 scroller 和 

list 组 件 中 使 用 。 

























































































吕 可 
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node : 需要 滚动 到 的 节点 。 





GtLiGnNS 2 
offset : Number // 滚动 到 节点 的 偏 移 距离 ， 默认 为 0 





























1 体 的 使 用 方法 如 下 : 

















var dom = require('@weex-module/dom'); 
module.exports = { 
methods: { 

SerolLl:, uictiom (), 


dom.scrollToElement (this.$el('someId'), {offset: 10}); 





10.6.2 steam 


steam 模块 主要 提供 的 是 网 络 请 求 方 法 ， 类 似 于 ajax 和 vue-resource 的 角色 。 具 体 方 
法 和 参数 如 下 : 


















































var stream = require('@weex-module/ stream); 
stream.fetch({ 
method: 'GET'， // HTTP 请 求 方法 


Ui ey // HTTP 请 求 地 址 

type:'json', // request 请 求 类 型 

body: { … ]， // HTTP body 数据 结构 

headers: … } // HTTP 头 部 属性 
}，function (response) { // 请 求 完成 回调 函数 

/站 刺 

response 


status (number) // response 的 状态 码 
statusText (string) // response 的 状态 描述 
ok (boolean) // 状态 码 在 200 ~ 299 值 为 true 
datal(object) // response 的 返回 数据 
headers (object) // response 的 headers 对 象 





} 
*/ 
},function(response) { // 请 求 过 程 回调 函数 

A 

response { 
readyState (number) // 当前 请 求 的 状态 值 
status (number) : // response 状态 值 
length (number) : // 已 接受 的 数据 长 度 
statusText (string) : // response 状态 描述 
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headers (object): // response headers 对 象 ， 包 括 数据 总 长 度 





modal 模块 主要 提供 了 模 态 框 的 相关 功能 ， 主 要 包含 toast、alert、confirm 、prompt 4 
种 类 型 。 


toast 类 型 使 用 方法 如 下 : 












































var modal = require('@weex-module/modal'); 
modal.toast({'message': 'I am toast!', 'duration': 1}); 









































其 中 duration 为 toast 模 态 框 的 显示 时 间 ， 之 后 会 自动 消失 。 








I am toast! 

















alert 类 型 使 用 方法 如 下 : 














modal.alert ({ 

message: 'alert modal', 
okTitle: "OK' 

}, function() { 


// 单 击 确认 按钮 后 的 回调 函数 





效果 如 图 10-14 所 示 。 














网 


10-14 




















confirm 类 型 使 用 方法 如 下 : 














modal.confirm( 
message: "confirm modal', 
站 长 下 下 二 二 个 下 加 其 
cancelTitle: "cancel' 
1 functionmt(tresult} 1{ 
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// 单 击 按钮 后 的 回调 函数 ，result 值 为 okTitle 或 cancelTitle 的 值 


}); 




















效果 如 图 10-15 所 示 。 














中 


伯 = 仁 


























prompt 类 型 使 用 方法 如 下 : 











modal.prompt ({ 
message: 'prompt modal', 
okTitle: 'ok', 
cancelTitle: 'cancel' 
}, function(res) { 


console.log(res.result + "7 
// res.result 为 ok(cancel)Title 的 值 ，res.data 为 输入 值 


"+ res.data); 














效果 如 图 10-16 所 示 。 











prompt modal 


el 


ok 








区 


10-16 











10.6.4 animation 
animation 提供 了 动画 相关 的 功能 ， 方 法 名 为 transition， 目 前 支持 translate、rotate 和 
scale 三 种 变化 形式 。 具 体 的 使 用 方式 如 下 。 


api 示例 : transition(node, options, callback)。 





















































require('@weex-module/animation'); 


和 


Var animation = 
animation.transition (testEl, 
styles: { 
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color: '#FF0000'， // 动画 结束 后 元 素颜 色 
transform:'translate (1，1)'， // 动画 效果 ,包括 translate/rotate/scale 3 种 方式 
transformOrigin: 'center center' // 动画 源 点 
}, 
duration: 0，//ms 动画 持续 时 间 
timingFunction: "ease'， // 动画 时 间 函 数 ， 值 包括 linear/ease-in/ease-out/ 
ease-in-out/cubic-bezier (xl1,yl1,x2,y2) 
delay: 0 //ms， 动 画 延 迟 开 始 时 间 
i edie oO 
console.log('animation finished.') 
}) 






































weex 的 example/animation.we 中 列举 了 大 部 分 的 动画 样 例 ， 利 用 的 是 this.$call 方式 


调用 animation 模块 : 























this.$call('animation', 'transition', this. ids.block.el.ref, { // 
$call 第 一 个 参数 为 模块 名 ， 第 二 个 参数 为 函数 名 
styles: styles, 





ti1minogpurnetions timingrEunction; 
duration: duration 
2 "allLBack) 





10.6.5 webview 


二 


webview 模块 主要 用 于 控制 web 组 件 的 路 径 变 化 ， 类 似 于 location， 提供 了 goBack、 
goForward 和 reload 方式 。 具 体 使 用 方式 如 下 : 







































































<template> 
<div class="wrapper"> 
<div class="toolbar" append = “tree"> 
<wxc-button type="primary" size="small" Value="back" onclick= 
"goback"></wxc-button> 
<wxc-button type="primary" size="small" value="forward" onclick= 
"goforward"></wxc-button> 
<wxc-button type="primary" size="small" value="refresh" onclick= 
"refresh"></wxc-button> 
</div> 
<web class="content" id="webview" src='https://m.taobao.com/?spm= 
0.0.0.0&v=0#index' ></web> 
</div> 
</template> 
<script> 
require('weex-components'); 
Var Swebview = require('Q@Qweex-module/webview'); 
module.exports = { 
methods: { 


180 异步 社区 会 员 123456(1429595365@qq.com) 专 享 尊重 版 权 


10.6 ”Weex 内 置 模块 


goback: fumnctionmn(}y 4 
Var webElement = this.$el('webview'); 
Swebview.goBack (webElement .ref); 
}, 
goforward: function() { 
Var webElement = this.$el('webview'); 
Swebview.goForward (webElement.ref); 
}, 
refresh: function() { 
Var webElement = this.$el('webview'); 
Swebview.reload (webElement .ref); 


} 
</script> 


























三 种 方法 都 需要 接受 web 组 件 的 引用 作为 参数 方 可 执行 。 








10.6.6 navigator 


navigator 模块 提供 了 组 件 间 跳 转 的 方法 ， 类 似 于 浏览 器 的 history， 通 过 push 和 pop 
方法 来 控制 页 面 的 载 入 和 退出 。 具 体 使 用 方法 如 下 : 




























































































push({ url : ", animated : true}, callback) 






































push 方法 支持 的 参数 包含 载 入 页 面 的 url 和 animated 是 否 使 用 动画 ，callback 则 在 页 
再 载 入 完成 之 后 执行 。 
pop({ animated : true }，callback)，pop 方法 与 bpush 方法 类 似 ， 只 不 过 第 一 个 参数 对 
象 只 包含 animated 属性 ， 不 需要 传 入 url。 


weex 的 examples/component/navigator-demo.we 给 出 了 实例 : 






















































































methods: { 
Bushs function(} 六 
var vm = this; 


var params = { 


'url': this.baseURL + 'component/navigator-demo.js?test=1', 
'animated' : "true'， 
} 
vm.$call('navigator', 'push',params, function () {}); 
}, 
pop: function() { 
var vm = this; 


var params = { 


'animated' : 'true', 
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vm.$call('navigator', 'pop',params, function () {}); 





10.6.7 storage 


storage 模块 提供 了 本 地 存储 的 功能 ， 可 供 调用 的 api 方法 如 下 : 

QD setltem(key, value, callback)， 设 置 key/value 属性 。 
@) getItem(key, callback)， 获取 key 的 value 值 。 
@ removeltem(key, callback)， 删 除 key 的 value 值 。 
由 length(callback)， 获 取 storage 的 长 度 。 

@) getAllKeys(callback)， 获 取 storage 的 所 有 值 。 










































































































































































所 有 操作 所 获取 的 值 都 通过 callback 中 的 参数 对 象 的 data 属性 来 传递 ， 例 如 : 
var storage = require('Q@weex-module/storage'); 
storage.setlitem('key' 'test', function(e) { 


/7 生计 站 相信 ebutb 和 和 aba 况 广 esult 汶 生 报 测 六 是 涉 岂 训 ， data 则 包含 函数 的 返回 值 
Fs 
storage.getitem('key', function(e) { 

console.log(e.data); 





Weex 提供 的 跨 平台 解决 方案 ,与 Vue.js 一 起 添加 了 生态 圈 上 新 的 一 块 。 和 Reactjs 与 
React-Native 这 样 的 组 合 类 似 ，Vue.js 的 开发 方式 和 api 设计 也 进入 了 移动 端的 开发 范畴 ， 
也 使 得 web 前 端 开 发 者 能 在 新 的 领域 扩展 自己 的 作用 。 目 前 来 襄 ，weex 提供 了 3 种 工作 模式 : 
中 类 似 于 React-Native， 支 持 单 页 使 用 或 整个 App 使 用 Weex 开发 ， 但 目前 还 缺少 路 由 和 

































































































































































































































































































































































































































































































































































生命 周期 管理 ; @ 把 Weex pea iOS/Android 组 件 来 使 用 ， 手 机 淘宝 的 首页 、 主 搜 结果 、 

交易 组 件 化 等 都 采用 此 种 解决 方案 ， 页面 主 页 也 比较 稳定 ， 并 且 能 够 实现 热 更 新 ， 这 对 需求 变 

更 比较 大 的 页 面 来 说 省 去 了 频繁 发 版 的 麻烦 ; @@ 在 H5 中 使 用 Weex， 利 用 组 件 直接 进行 页 面 
发 ， 但 对 于 一 些 复杂 页 面 和 交互 性 强 的 页 面 说 来 还 不 是 很 适用 。 
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Vue.js 2.0 版 本 已 于 2016 年 10 
加 入 了 不 少 新 的 


a 





i 
草 





















































Vue.js 2.0 新 特性 


3 1 日 正式 发 布 ， 除 了 在 原 有 的 基础 上 进行 调整 外 ， 还 

















特性 。 本 

















章 主要 介绍 两 个 方面 ，Render 函数 和 服务 端 泻 染 。Render 函数 给 开 









































发 者 提供 了 




















染 则 为 SPA 项 











度 更 高 的 模板 编程 能 力 ， 而 不 仅仅 局 限于 之 前 的 v-if/v-else 指令 。 服 务 端 泻 











目 提供 了 















































A 





利于 SEO 和 网 络 情况 慢 的 解决 方案 ， 弥补 了 纯粹 前 端 泻 染 的 一 些 洛 症 。 


) 11.1 ” Render 函数 


一 般 我 们 在 编写 组 件 时 ， 通 常 采用 template 来 


















































位 

































































v-if/v-else 和 slot 就 ， 
用 接口 可 以 定义 为 <my-component type='text'></my-component>， 一 般 可 能 会 这 么 编写 





观 、 清 晰 ， 对 于 写 惯 页 面 的 用 户 习 































































































1 建 HTML 结构 。 这 种 写法 的 好 处 是 
说 ， 直 接 就 能 使 用 。 但 对 一 些 复杂 场景 ，template 中 的 














能 显得 不 够 用 了 。 例 如 我 们 想 通 过 参数 来 控制 模板 中 生成 的 组 件 ， 调 






































模板 : 
<div> 
<Text v-if='type == 'text"></Text> 
<Image v-if='type == 'image"></Image 
</div> 





























这 种 写法 显然 不 是 很 合适 ， 随 着 需要 控制 的 组 件 的 增多 ， 这 个 template 会 被 不 
不 停 地 增加 v--if 判断 。 而 Render 函数 就 可 以 解决 上 述 问题， 我 们 可 以 将 上 述 组 件 改 写成 : 
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Vue .component ('my-component', { 


render: function (createElement) { 


return createElement ( 


redquire('./components/' + this.type) 


} 
}) 


// 动态 引入 子 组 件 





























这 样 就 可 以 通过 参数 动态 地 加 载 组 件 








的 加 载 也 更 加 显得 灵活 。 


























11.1.1 createElement 用 法 











Render 函数 中 主要 提供 








选项 ， 而 不 需要 通过 v-if 去 做 一 个 个 的 并 





让 


| 新 ， 组 从 

















了 createElement 方法 ， 可 以 拒 

















createElement 的 参数 类 型 和 


法 。 




















1 ) 组 件 类 型 : 参数 可 以 直接 为 String， 组 件 选 项 对 象 ， 以 及 返 











项 对 象 的 函数 。 例 如 : 


受 三 个 参数 ， 这 



































值 为 String 或 组 件 选 





createElement ('div'); 
createElement ({ 
template : "1 
data : tt 

) 


return ‘'div' 


) 


createElement (function() 1{ 








家 


2 ) 属性 对 象 : 


ll 














二 个 参数 为 可 选 参数 ， 包 含 了 组 件 所 需 的 




















HTML 属性 及 Vue.js 组 件 局 








0 
如 | 


性 





可 以 在 此 定义 ， 完 整 的 数据 对 象 示 














盟 性 的 对 象 集 








例如 下 : 


J 
口 ， 


即 大 部 分 的 








// 同 'v-pind:class' 


elaASS SS 半 


}, 


// 同 'v-bind:style' 


style: { 
}, 
// 常规 HTML 属性 
attrs:. 二 
id: 'text' 
}, 
// 组 件 props 属性 
Drops: + 
type : 'text' 


一 致 ， 可 以 是 对 象 也 可 以 是 数组 


一 臻 
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// DOM 属性 


domeErons: { 


innerHTML: 


}, 


// 事件 监听 选项 ， 使 用 $on 绑 定 的 事件 


on: { 


add: this.addHandler 


}, 


// 原生 事件 监听 选项 


nativeOn: { 


click: this.nativeClickHandler 


Fi 


// 自 定义 指令 数组 ， 每 个 数组 元 素 即 为 指令 的 选项 


directives: 
{ 
name: 


value: 


[ 


'my-directive', 


this.directiveValue 


// 如 果子 组 件 有 定义 slot 的 名 称 
slot: ‘'name-of-slot"' 

// 其 他 特殊 顶层 属性 

key: 'myKey', 


ref: 'myRef' 


11.1 Render 函 数 
































数 也 为 可 选 参数 ， 类 型 为 String 或 Array， 为 组 件 内 部 子 元 素 的 集 





2 
口 


o 





3 ) 子 节 点 : 该 参 
具体 可 接受 的 形式 如 
[ 
createElement (MyComponent, {……… Fy, 
"Bar 





11.1.2 ”使 用 案例 


















































在 Render 函数 中 ， 就 没有 v-if 和 v-for 这 样 的 指令 来 帮助 我 们 编写 模板 了 ， 所 有 的 好 
辑 都 会 依靠 JavaScript 代码 来 完成 。 例 如 : 
<ul v-if="items.length"> 
<li v-for="item in items">{{ item.title }}</1i> 
</ul> 
<div v-else> 没有 数据 。</div> 
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， 我 们 就 需要 写成 : 











在 Render 函数 








render: function 
if (this.items. length) { 
return createElement ('ul', 


return createElement ('1i' 


})) 
else { 


} 


return createElement ('div', 


(createElement) { 


this.items.map (function (item) { 


item.title) 


n 


' 没有 数据 。') 




















需要 注意 的 是 ， 所 有 的 组 件 树 




















1 的 VNodes 必须 

















E 一 ， 例 如 上 述 例子 如 果 将 上 i 修改 成 : 








render: function (create 


Var liVNode 


CreateElement ( 


return createElement ('ul'，[ 


liVNode, liVNode 


] ) 
} 


Element) { 
ri") 








这 样 的 render 函数 是 无 效 的 ，liVNode 即 为 重复 VNode。 


11.1.3 ”函数 化 组 件 


函数 化 组 件 是 一 个 没有 状态 ( data ) 和 没有 实例 ( this 上下文 ) 的 一 种 组 件 ; 


过 render 函数 进行 泻 染 ， 以 及 
状态 和 上 下 文 ， 组 件 的 泻 染 开 刍 
体 类 型 组 件 的 情况 ( 有 点 类 似 



























































就 比较 低 ， 


F abstract class ), 使 















































































































































方式 如 下 : 






































类 型 ， 只 通 
render 函数 中 新 增 的 context 参数 来 传递 上 下 文 。 由 于 不 存在 
常用 于 不 含有 具体 模板 ,但 根据 所 传 参 数 可 以 生成 具 





Vue .component ('my-component', 


{ 


// functional 设置 为 true 后 ，render 提供 第 二 个 参数 作为 上 下 文 


functional: true, 
render: function (createElement, 
4 


Fy 
// Props 可 选 


context) { 


















































bropss 1 
// 
}) 
利用 函数 化 组 件 ， 我们 可 以 将 本 章 中 最 初 的 例子 改写 为 : 
Vue .component ('my-component', { 
functional: true, 
render: function (createElement, context) { 


return createElement ( 


require('./components/' 
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context.data, 
context.children 


























































































































}) 
11.1.4 JSX 

Render 函数 的 编写 的 确 麻 烦 了 很 多 ， 所 以 官方 推荐 了 一 球 Babel 的 插件 babel-plugin- 
transform-vue-jsx， 用 来 将 JSX 转化 成 Render 可 接受 的 返回 值 。 
1. JSX 

JSX 是 React 提供 的 一 个 语法 方案 ， 可 以 在 JavaScript 的 代码 中 直接 使 用 HTML 标签 来 
编写 JavaScript 对 象 。 其 使 用 的 是 XML-like 语法 ， 这 种 语法 方案 需要 通过 JSXTransformer 








































































































来 进行 编译 转换 成 真实 可 用 的 JavaScript 代码 。 基 本 的 语法 规则 为 遇 到 HTML 标签 ( 以 < 
)， 就 用 HTML 规则 解析 ; 遇 到 代码 块 ， 即 以 { 开 头 )， 就 用 JavaScript 规则 解析 。 例 如 : 

























































































import MyComponent from './MyComponent.vue'; 
render (h) { 
return ( 
<MyComponent type={this.type}> 


</ MyComponent> 


} 





2. babel-plugin-transform-vue-jsX 
使 用 该 插件 需要 先 按照 几 个 依赖 包 ， 安 装 步 又 如 下 : 











Hr 


























npm install\ 
babel-plugin-syntax-jsx\ 
babel-plugin-transform-vue-jsx\ 
babel-helper-vue-jsx-merge-props\ 


--save-dev 




















Ir 























如 果 项 目 使 用 webpack 配置 的 话 ， 添 加 loader ， 使 用 babel : 






































loaders: 
{ test: /\.js$/, loader: 'babel', exclude: /node modules/ } 





并 在 .babelrc 中 添加 插件 : 

















t 











"eseteo" es ([ "es2015™"], 
"plugins": [ “transform-vue-jsx"] 
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3. 具体 用 法 






































在 第 11.1.1 小 节 中 介绍 了 createBlement 参数 的 主要 用 法 ， 在 JSX 中 就 可 以 




















接 写 在 























HTML 标签 上 ,例如 : 








render (h) { 
return ( 

<div 
// 样式 属性 
class={{ active: true }} 
style={{ color: 'red', fontSize: '14px' }} 
id="text" 
// DOM 属性 
domProps-innerHTML="™**** vy 
// 事件 绑 定 
on-add={this.addHandler } 
nativeOn-click={this.nativeClickHandler} 
// 特殊 属性 
key="key™" 
ref="ref™ 
slot="slot"> 

</div> 
































Render 函数 为 组 件 提供 了 一 种 更 程序 化 的 编写 方法 ,但 从 开发 角度 来 说 还 是 增加 了 编写 
的 成 本 ， 所 以 Vue.js 2.0 对 两 种 泻 染 方式 都 持 开放 态度 ， 我 们 既 可 以 使 用 template 编写 直观 




























































































的 HTML 代码 ， 也 可 以 使 用 render 函数 提升 组 件 的 灵活 性 ， 各 取 所 需 。 


) 11.2 ”服务 端 泻 染 






















































































































































































在 2.3 节 中 已 经 对 比 过 了 前 后 端 泻 染 的 各 自 特 点 ， 两 种 方式 都 有 自己 的 适用 场景 。Vue.js 
在 2.0 中 加 入 了 服务 端 泻 染 这 个 特性 ， 使 得 我 们 能 更 灵活 地 进行 选择 。 本 节 就 主要 介绍 如 何在 
Vue.js 2.0 中 使 用 服务 端 泻 染 (Server-Side Rendering )。 
11.2.1 vue-server-renderer 

Vue.js 的 服务 端 泻 染 的 基础 用 法 非常 简单 ， 主 要 依赖 于 Vue-server-renderer， 由 它 提 


















































供 了 方法 将 Vue.js 实例 转化 成 HTML 字符 串 形式 。 例 如 : 





上 




















Var Vue = require('vue') 
Var app = new Vue ({ 


// 实例 模板 可 以 使 用 template 选项 ， 也 可 以 使 用 render 函数 
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A 
render (h) { 
return h('hil', this.msg); 
} 


WA 
template : '<hl>{{msg}}</h1l>', 
data 全 并 
msg : 'hello wor1ld' 
} 
} 
Var renderer = require('vue-server-renderer') .createRenderer () 


renderer.renderToString(app, function (error, html) { 


console.log(html) // => <hl server-rendered="true">hello world</hl1l> 


}) 





11.2.2 简单 实例 


对 于 一 个 Vue.js 页 面 来 说 ， 请 求 返回 的 HTML 可 以 由 服务 端 演 染 好 ， 但 想 要 对 这 个 页 



















































































进行 对 应 的 数据 绑 定 、 事 件 监 听 等 行为 ， 仍 需要 在 浏览 器 里 进行 ， 也 就 是 说 同一 





























V 























实例 既 需要 在 服务 端 被 用 作 演 染 ， 又 需要 在 浏览 器 端 被 实例 化 从 而 进行 数据 线 定 。 所 以 在 编写 



















































































ue 实例 时 ， 需 要 在 代码 中 区 分 当前 引用 的 是 后 端 环境 还 是 前 端 环 境 。 我 们 会 通过 下 面 这 个 完 








整 的 例子 来 说 明 服 务 端 泻 染 。 





// static/app.js 
(function () { 'use strict' 
Var createApp = function () { 
return new Vuel({ 
template: '<div id="app"> \ 


{{msg}} \ 
<button @click="click">click</button>\ 
ys 
data: { 
msg: 0 


jx 
methods : { 
人 下 于 总 大 3S, functiom() 攻 
alert (this.msg); 


} 

} 

// 判断 当前 环境 是 服务 端 环境 还 是 浏览 器 环境 

if (typeof module !== 'undefined' && module.exports) { 
// 服务 端 环 境 ， 返回 实例 的 构造 函数 
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module.exports = createApp 
} else { 
// 浏览 器 环境 ， 直 接 进行 实例 化 
this.app = CreateApp () 
} 
}) .call (this) 


// index.html 
<lIDOCTYPE html> 
<htmil> 
<head> 
<title>SSsR</title> 
<script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script> 
</head> 
<body> 
<div id="app"></div> 
“urint Src="/ Statio/app. TJS"S</Serint> 
<script>app. $mount ('#app')</script> 
</body> 
</html> 























HI 





























接 下 来 就 是 服务 端 代码 ， 我 们 使 用 NodeJS 的 express 作为 服务 端 框 架 ， 使 用 前 通过 

















al 





npm install 进行 安装 。 











// server.js 

"use strict" 

Var fs = require('fs') 

Var path = require('path') 
global.Vue = require('vue') 


// 获取 index.html 布局 


var layout = fs.readFileSync('./index.html', ‘'utf8') 

Var renderer = require('vue-server-renderer') .createRenderer () 
// 创建 一 个 Express 服务 器 

Var express = require('express') 

Var server = express () 


// 设置 "static" 文件 夹 为 静态 资源 路 径 
server.usel('/static', express.staticl( 
path.resolve( dirname, 'static') 

) ) 
// 处 理 所 有 的 Get 请 求 


server.get('*', function (request, response) { 
renderer.renderToStringl 
// 获取 app.js 的 Vue 实例 


require('./static/app') ()， 


funetion {Serror, html} 1 
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1 {SFPOF} | 
console.error (error) 
return response 
.status (500) 
.Send('Server Error') 
} 
// 将 泻 染 好 的 HTML 插入 替换 index.html 中 ， 返 回 给 浏览 器 


response.send(layout.replace('<div id=" 0 html)) 


) 
}) 
// 监听 3000 端口 , 通过 http://localhost:3000/ 访问 应 用 
server.listen(3000, function (error) { 

if (error) throw error 

console.log('Server is running at localhost:5000') 
}) 





11.2.3 ”缓存 和 流 式 响 应 


在 服务 端 泻 染 时 ， 我 们 可 以 从 两 方面 考虑 性 能 问题 。 第 一 ， 如 何 减 少 组 件 泻 染 成 HTML 字 
符 串 的 时 间 ， 特 别 当 这 个 组 件 会 被 经 常 使 用 ; 第 二 ， 经 过 服务 端 演 染 后 ， 请 求 返回 的 HTML 显然 
会 比 采 用 前 端 泻 染 返 回 的 数据 量 要 大 ， 如 果 能 对 传输 过 程 进行 优化 ， 也 将 能 减少 服务 端 泻 染 的 缺陷 。 
1. Iru-cache 
启 方 推荐 了 lru-cache 配合 vue-server-renderer 使 用 ， 能 够 给 泻 染 器 提供 一 个 缓存 对 
象 ， 可 以 提供 高 达 1000 个 独立 的 渲染 ， 使 用 方式 也 非常 简单 ， 例 如 : 






















































































































































































ar 




















Var createRenderer = require('vue-server-renderer') .createRenderer 
Var lru = require('lru-cache') 
Var renderer = createRenderer({ 


cache: lru(1000) 


























而 组 件 需 要 提供 一 个 唯一 的 name 和 serverCacheKey 函数 ， 函 数 返 回 值 中 需要 包含 组 
件 作用 域内 的 数据 且 唯 一 ， 例 如 : 



















































































Vue .Component ({ 





name: "1Li1st-1I'v 
templates <li>{{ 4tem,name }}</1i>', 
props.: 'item'], 


serverCacheKey: function (props) { 
return props.item.name + '::' + props.item.id 


}) 























需要 注意 的 是 ， 尽 量 避 免 在 绥 存 组 件 中 依赖 全 局 状态 (例如 Vuex 中 的 状态 )， 否 则 整个 
子 树 都 将 被 缓存 。 我 们 可 以 在 一 些 静态 组 件 、 列 表 组 件 及 通用 UI 组件 中 使 用 缓存 组 件 ， 有 利 
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于 提升 泻 染 性 能 。 
2. 流 式 响应 
流 式 响应 即 服务 器 支持 以 流 (Streaming ) 的 形式 传输 数据 ， 不 需要 等 符 整 个 HTML 都 
被 泻 染 后 再 传输 数据 ， 服 务 端 可 以 做 到 边 演 染 边 传 输 ， 节 约 服 务 器 内 存 ; 而 客户 端 则 会 更 早 地 
接收 到 页 面 的 <head> 部 分 ， 即 能 更 早 地 加 载 所 需 的 外 部 资源 ， 并 向 用 户 展示 出 页 面 。 服 务 器 
支持 流 式 响应 ， 也 需要 演 染 器 的 配合 ， 而 Vue.js 2.0 中 就 支持 这 一 特性 。 我 们 可 以 将 第 11.2.2 
小 例子 中 的 server.js 文件 做 出 如 下 修改 : 
将 layout 获取 的 index.html 模板 拆 分 成 两 段 HTML : 




















































































































































































































Wo 




















var sections = layout.split('<div id="app"></div>') 
var headerHTML = sections [0 





var footerHTML = sections [1 

















修改 处 理 所 有 get 请 求 浮 数 为 : 














server.get('*', function (req, res) { 
// 利用 vue-server-renderer 提供 的 泻 染 器 方法 将 Vue 实例 作为 流 
var stream = renderer.renderToStream (require('./static/app') ()) 
// 将 HTML 头 部 先 写 入 响应 
res.write (headerHTML) 
// 每 当 新 的 块 被 泻 染 后 就 立即 写 入 响应 


stream.on('data', function (chunk) { 





res.write (chunk) 
}) 
// 当 所 有 块 被 泻 染 完成 后 ， 将 HTML 尾部 写 入 响应 
stream.on('end', function () { 
res.end(footerHTML) 
}) 
// 错误 处 理 
stream.on('error', function (error) { 
console.error (error) 
return response 
.status (500) 
.Send('Server Error') 
二 
} 














我 们 可 以 增加 模板 的 DOM 数 ， 利 用 <li v-for=”n in 100000”>{{n}}</li>， 这 样 就 能 
比较 明显 地 对 比 出 来 两 种 泻 染 传输 方式 的 区 别 。 


























11.2.4 SPA 实例 


实际 项 目 往往 会 比 上 述 例子 复 ， 通 常会 包含 多 个 页 面 及 组 件 ， 这 样 就 需要 用 到 
vue-router 来 进行 路 由 控制 ; ea 也 都 需要 从 数据 库 中 获取 真实 数据 ; 
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lal 




















说 明 实际 项 目 中 使 用 服务 端 泻 染 的 注意 点 。 

















丁 主要 从 以 下 几 个 方 

1. 入口 文件 分 离 
从 第 11.2.2 节 中 的 例子 可 以 看 到 服务 端 和 浏览 器 端 所 使 用 的 Vue.js 的 状态 并 不 相同 ， 服 

务 端 需要 整个 应 用 的 Vue 实例 ， 浏 览 器 端 则 需要 将 Vue 实例 挂 载 到 已 泻 染 的 页 面 上 ， 并 获取 

当前 的 组 件 状态 ， 建 立 数据 绑 定 等 行为 。 当 然 ， 我 们 不 可 能 写 两 套 组 件 来 分 别 满足 这 两 端的 需 

求 ， 但 却 可 以 通过 不 同 的 入 口 文件 来 进行 不 同 组 件 的 操作 ， 各 取 所 需 。 

假设 项 目的 结构 如 下 : 
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RN 人 




























































































| 一 一 build // webpack 所 需 的 配置 
一 一 dist  // 编译 后 生成 的 文件 位 置 





| 一 一 assets // 静态 资源 文件 

| 一 一 components // 组 件 位 置 

| 一 一 router // 路 由 控制 ， 一 般 用 vue-router 实现 
| —— Store // 应 用 状态 管理 和 数据 接口 封装 

上 -一 一 views // 页 面 组 件 

| 一 一 app.js // 根 组 件 
| 一 一 app.vue  // 根 组 件 模板 

| 一 一 client-entry.js // 浏览 器 端 入 口 文件 
| 一 一 server-entry.js // 服务 端 入 口 文件 
上 一 一 index.html 


其 中 client-entry.js 和 server-entry.js 分 别 就 是 两 端的 入 口 文件 ，client-entry.js 较 


为 简单 ， 代 码 如 下 : 


require('es6-promise') .polyfill () // 引入 ES6 语法 

import { app, store } from './app' 
store.replaceState (window. INITIAL STATE ) // 获取 当前 应 用 状态 
app.S$mount ('#app') 


server-entry.js 代码 如 下 : 






















































































import { app, router, store } from !./app' 
export default context => { 
router.push (context.url) // 将 router 设置 成 当前 环境 下 的 url 
// 手动 匹配 符合 当前 路 由 的 组 件 
return Promise.all (router.getMatchedComponents() .map (component => { 
// 组 件 中 需要 定义 preFetch 函数 ， 用 于 调用 数据 接口 获取 真实 数据 


if (component .PreFetch) { 





return component .PreFetch (store) 
} 
本 全 > 
context.initialState = store.state // 在 上 下 文中 保存 应 用 状态 
// 获取 完 数据 后 ， 返 回 app 实例 
return app 
}) 
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2. 数据 接口 
于 前 端 获取 数据 利用 的 是 XMLHttpRequest 对 象 ， 而 后 端 NodeJS 若 要 发 起 HTTP 
请 求 则 需要 利用 自身 的 HTTP 模块 ， 两 者 的 api 方式 并 不 完全 相同 ， 我 们 需要 使 用 一 个 第 
方 库 将 两 者 的 调用 方式 封装 起 来 ， 使 得 在 浏览 器 端的 时 候 能 使 用 XMLHttpRequest， 而 在 
NodeJS 环境 中 使 用 HTTP 模块 ， 避 免 重复 编写 两 套 不 同 的 数据 请 求 接 


可 以 使 用 
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E axios 来 封装 HTTP 请 求 ， 我 们 的 数据 接口 可 以 写成 如 下 : 



























































小 
| 
这 























// store/api.js 


import axios from "axios' 
const defaults = { 

baseURL: '/api/' 
Object.assign(axios.defaults, defaults) 
export const fetchList = () => { 


return axios.get('/items') 


export const fetchDetail = (id) => { 


return axios.get('/items/' + id) 





3. 前 后 端 状态 统一 

所 谓 前 后 端 状态 统一 ， 其 实 就 是 服务 端 完成 泻 染 后 ， 需 要 将 应 用 的 状态 ( 即 获 取 的 数据 弓 
构 ) 传递 给 前 端的 Vue.js 实例 ， 使 得 能 够 进行 数据 绑 定 等 初始 化 行为 。 由 于 用 户 在 浏览 器 端 
可 以 直接 访问 任意 有 效 url 的 ， 也 就 是 说 服务 端 需要 处 理 所 有 有 效 请 求 对 应 的 组 件 ， 相 当 于 要 维 
护 所 有 组 件 的 状态 ， 所 以 官方 推荐 引入 Vuex 来 管理 整体 的 组 件 状态 。 具 体 涉 及 的 代码 如 下 : 
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// ./store/index.js 
import Vue from "vVue' 
import Vuex from '‘'vuex' 


import * as api from './api' 
Vue.use (Vuex) 


const store = new Vuex.Storelt{ 
state: { 
二 让 仿 七 ,站 和 
detail: {} 
}, 
actions: { 


FETCH LIST ({ commit, state }) { 
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11.2 ”服务 端 泻 染 


return api.fetchList () 
.then(({data}) => { 
commit('SET LIST', [ data ]) 
lj 
jx 


FETCH DETAIL ({ commit, state }, id) 1 
return api.fetchDetail (id) 
.then(({data}) => { 
commit('SET DETAIL', data) 
; 


}, 
mutations: { 
SET LIST (state, data) {{ 
state.list = data 
}, 


SET DETAIL (state, data) { 
state.detail = data 


+. 
export default store 
























































app.js 中 需要 使 用 vuex-router-sync, 将 route 对 象 输入 到 store 中， 使 得 路 由 状态 也 




















能 被 奶 踪 。 





// app.js 
import store from './store' 
import { Sync } from 'vuex-router-sync' 


sync(store,，router) // 使 用 方法 很 简单 ， 多 添加 这 一 句 即 可 

















t 


在 组 件 内 我 们 需要 这 么 人 处理: 














// views/Detail.vue 

const fetchDetail = store => { 
return store.dispatch('FETCH DETAIL', store.state.route.params.id) 

} 

import {mapGetters, mapActions, mapState} from ‘vuex 


' 
export defauilt { 
computed: mapState ({ 
detail : state => state.detail 


}) ， 
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beforeMount () { 


fetchDetail (this.$store) // 前 端 切换 路 由 到 该 页 面 时 发 起 数据 请 求 


}, 
preFetch: fetchDetail // 供 后 端 泻 染 时 调用 的 接口 
} 


























在 前 端的 入 口 文件 client-entry.js 中 有 这 么 一 句 : 

















store.replaceState (window. _INITIAL STATE ) 






































所 以 我 们 在 传输 HTML 中 ， 需 要 将 服务 端 得 到 的 应 用 状态 利 









































window 对 象 ， 具 体 代码 如 下 : 





] script 标签 传递 给 





Const serialize = require('serialize-javascript') 
const context = { url: req.url } 
const renderStream = renderer.renderToStream (context) 


let firstChunk = true 
renderSstream.on('data', chunk => { 
4f (firstcChunk) { 
// 此 处 的 context 即 是 server-entry.js 传 入 的 context 参数 ， 


// ”服务 端 获取 数据 后 ， 会 把 状态 赋值 在 context.initalState 上 ， 然 后 通过 serialize 序列 
化 状态 传递 到 window 上 


if (context .initialState) { 
res.writel( 
'<script>window. INITIAL STATE =${ 





serialize (context.initialState, { isJSON: true }) 


}</sceript>" 


} 
firstChunk = false 
} 


res.write (chunk) 





解决 了 上 述 几 个 问题 后 ， 基 本 上 就 完成 了 一 个 可 以 由 后 端 泻 染 的 SPA 项 目 流程 。 同 样 ， 



































































































































六 利用 webpack 来 搭建 开发 环境 和 编译 可 发 布 代码 ， 具 体 的 配置 文件 和 服务 器 代码 可 以 
官方 提供 的 样 例 https://github.com/vuejs/vue-hackernews-2.0。 
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人 民 邮 电 出 版 社 


www,.epubifcom,cn 


iE 乔 步 什 区 


异步 社区 的 来 历 

异步 社区 (www.epubit.com. 
cn) 是 人 民 邮 电 出 版 社 旗下 IT 专业 
图 书 旗舰 社区 ， 于 2015 年 8 月 上 



















+ 更 多 


线 运 营 e 异步 社区 成 立 一 周年 大 型 灼 书 活动 开局 ! 
异步 社区 依托 于 人 民 邮 电 出 Ts 和 月 上 8 





营 ， 噶 步 社区 依托 于 人 民 闻 电 出 版 社 20 款 年 的 IT 
专业 


版 社 20 余年 的 IT 专业 优质 出 版 资 
源 和 编辑 策划 团队 ， 打 造 传统 出 版 
与 电子 出 版 和 自 出 版 结合 、 纸 质 书 


与 电子 书 结合 、 传 统 印刷 与 POD | -essressuas mapsss5 





ee iWeb 维 会 北京 站 即将 开局 , 为 HTML5 几 


每 一 次 振 何 高 吁 扩 时 行业 的 影响 ， 每 一 天 无 政 人 
训 壤 的 勤 调 ,2016 林 把! 未 到 , 8 月 27 日 
我 在 这 





作 5 妖 会 北京: 在 这 里 ,等 你 来 , 为 
按 需 印刷 结合 的 出 版 平台 ,提供 最 全 wm se 
加 赚 反 部 志 繁 


新 技术 资讯 ， 为 作者 和 读者 打造 交 | [= 
流 互动 的 平台 。 ie 


x Ap TD python 入 得 亿 到 上 。 机 器 学 习 项 目 开 内 六 战区 苇 python 但 和 门人 让 Wi: 二 -ts 畏 国 ma chvdeun mas chinine 
-A H 手 与 实战 { 魏 2 版 ) 考 Python (第 2 版 ) Bresnahan 方 科 央 的 宇 (作者 ) 陈 晓 明 


马 立 新 泽 才 ) 














购买 图 书 


我 们 出 版 的 图 书 涵盖 主流 IT 技术 ， 在 编程 语言 、Web 技术 、 数 据 科 学 等 领域 有 众多 经 典 畅销 图 书 。 
社区 现 已 上 线 图 书 1000 余 种 ， 电 子 书 400 多 种 ， 部 分 新 书 实现 纸 书 、 电 子 书 同步 出 版 。 我 们 还 会 定期 发 
布 新 书 书 讯 。 
































下 载 资源 


社区 内 提供 随 书 附 赠 的 资源 ， 如 书 中 的 案例 或 程序 源 代码 。 
另外 ， 社 区 还 提供 了 大 量 的 免费 电子 书 ， 只 要 注册 成 为 社区 用 户 就 可 以 免费 下 载 。 























与 作 译 者 互动 


很 多 图 书 的 作 译 者 已 经 入 驻 社区 ， 您 可 以 关注 他 们 ， 咨 询 技术 问题 ， 可 以 阅读 不 断 更 新 的 技术 文章 ， 
听 作 译 者 和 编辑 畅 聊 好 书 背 后 有 趣 的 故事 ; 还 可 以 参与 社区 的 作者 访谈 栏目 , 向 您 关注 的 作者 提出 采访 题目 。 



































灵活 优惠 的 购书 


您 可 以 方便 地 下 单 购买 纸 质 图 书 或 电子 图 书 ， 纸 质 图 书 直接 从 人 民 邮 电 出 版 社 书库 发 货 ， 电 子 书 提 
供 多 种 阅读 格式 。 

对 于 重 磅 新 书 ， 社 区 提供 预 售 和 新 书 首发 服务 ， 用 户 可 以 第 一 时 间 买 到 心仪 的 新 书 。 

用 户 帐户 中 的 积分 可 以 用 于 购书 优惠 。100 积分 =1 元 ， 购 买 图 书 时 ， 在 。 ; 
里 填 入 可 使 用 的 积分 数值 ， 即 可 扣 减 相应 金额 。 
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购买 本 书 的 读者 专 享 


使 用 方法 : 
击 “ 使 用 优惠 码 ”， 即 可 享受 电子 书 8 折 优惠 〈 本 优惠 券 只 可 使 用 一 次 ) 


注册 成 为 社 
























































惠 


特别 优 


异步 社区 购书 优惠 券 。 


区 用 户 ， 在 下 单 购书 时 输入 ”57AWG 


， 然 后 点 






























王 小 刚 ( 译 者 ) 


eet 人 ”【 而 非 技术 也 非 管理 ) 的 角度 关注 软件 开发 人 员 自 身 发 展 的 书 。 书 中 论 ; 
习惯 ,又 包括 思维 方式 ， 生 显 技术 中 “人 ”的 因素 ,全面 讲解 软件 行业 从 业 人 员 所 


方方面面 ,从 孔 秘 面试 的 流程 到 精耕细作 出 一 份 杀手 级 简历 ， 从 创 
, 从 提高 自己 工作 效率 到 与 如 何 与 “拖延 证” 做 斗争 ， 基 至 


简 、 自 我 营销 简 、 学 习 简 、 生 产 力 简 、 理 财税、 健身 简 、 精 神 科 等 七 入 ， 概括 了 软 


祈 海 玲 ( 硅 任 第 罚 ) 
C 6 9. OK 


述 的 


下 载 PDF 样 章 

















纸 电 图 书 组 合 购买 各 代表 之 4 生生 
国 ] 的 坦 Z. 森 梅 花 ( John Z. Sonmez ) (作者 ) 

社区 独家 提供 纸 质 图 书 和 电子 书 

组 合 购买 方式 , 价格 优惠 , 一 次 购买 ， 

多 种 阅读 选择 。 

社区 里 还 可 以 做 什么 于 = 
提交 着 es 
您 可 以 在 图 书页 面 下方 提 交 勘 电子 版 + 纸 质 版 半 59.00 

误 ， 每 条 勘误 被 确认 后 可 以 获得 100 

积分 。 热 心 勘误 的 读者 还 有 机 会 参与 书稿 的 审 校 和 翻译 工作 。 


社 Ee Markdown 的 写作 环境 ， 喜 欢 写作 的 您 可 以 在 此 一 试 身手 ， 在 
， 更 可 以 体验 自 出 版 的 乐趣 ， 





得 和 读书 体会 


























社区 里 分 


分 享 企 


你 的 技术 心 








轻松 实现 出 版 的 梦想 。 




















如 果 或 为 社 区 认证 作 译 者 ， 


























会 议 活 动 早 知道 








还 可 以 享受 异步 社区 提供 的 作者 专 享 特色 服务 。 





您 可 以 掌握 IT 圈 的 技术 会 议 资讯 ， 更 有 机 会 免费 获 赠 大 会 门票 。 
加 入 异步 
扫描 任意 二 维 码 都 能 找到 我 们 : 
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官方 微 信 : 异步 社区 

官方 微 博 ，@ 人 邮 异 步 社 区 ，@ 人 民 邮 电 出 版 社 - 信息 技术 分 社 
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VUE.jS 前 端 开发 
快速 入 门 与 专业 应 用 


本 书 分 为 10 章 , 包括 : 简介 、 基础 特性 、 指 陈 陆 扬 

令 、 过 滤器 、 过 滤 、 组件、 状态 管理 、 常 用 插 。 ”前端 工程 师 , 曾 任职 百度 前 端 工程 师 以 及 
件 、 工 程 实 例 和 Weex 打 包 。 从 简单 的 单个 去 哪儿 网 无 线 touch 机 票 前 端 负责 人 。 
实例 和 基础 语法 , 到 工程 实例 , 系统 讲述 了 

Vue.js 在 项 目 中 的 适用 场景 和 具体 操作 。 目前 担任 在 线 教 育 产品 精 雕 细 课 (新 东方 


本 书 案例 详实 , 能 够 帮助 读者 体会 到 框架 。 投资 ) 的 前 端 负责 人 。 
的 优点 和 便捷 之 处 , 提升 开发 效率 , 最 后 将 


Vue.js 运 用 到 实际 项 目 中 。 熟悉 Vue.js 框 架 , 并 使 用 它 开 发 线 上 产品 。 


AY iWeb 学 院 专注 大 前 端 职业 化 提升 
iwebxy.com http://www.iwebxy.com 


ISBN 978-7-115-44493-6 
异步 社区 www.epubit.com.cn 
新 浪 微 博 @ 人 邮 异 步 社区 
投稿 /反馈 邮箱 contact@epubit.com.cn 
9 1078711514449360> 
分 类 建议 : 计算 机 / 网 页 制作 


人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn 
异步 社区 会 员 123456(1429595365@qq.com) 专 享 尊重 版 权 








人 民 邮 电 出 版 社 


| | www.epubit.com.cn 











站 FRIK 人 








